ESP3D-WEBUI/www/sub/SPIFFSdlg.html

<!-- SPIFFS Modal -->
<div id="SPIFFSdlg.html" class="modal">
    <!-- SPIFFS content -->
    <div class="modal-content">
        <div class="modal-header">
            <span class="close" onclick="closeSPIFFSDialog('cancel')"><b>&times;</b></span>
            <h3>
                <div class="modal-title" translate>ESP3D Filesystem</div>
            </h3>
        </div>
        <div class="modal-body">
            <div class="panel" id="SPIFFS">
                <div class="panel-body">
                    <div class="panel-flex-row">
                        <input type="file" style="display:none" id="SPIFFS-select" name="myfiles[]" multiple onchange="checkSPIFFSfiles()" />
                        <table id="SPIFFS-select_form">
                            <tr>
                                <td>
                                    <button class="btn btn-info" type="button" id="SPIFFS_select_files" onclick="document.getElementById('SPIFFS-select').click();" translate>Select files</button>
                                </td>
                                <td>
                                    <div class="filetext no_overflow" id="SPIFFS_file_name" onmouseup="document.getElementById('SPIFFS_select_files').click();"></div>
                                </td>
                            </tr>
                        </table>
                        &nbsp;
                        <button class="btn btn-primary btn-svg" type="button" id="SPIFFS_uploadbtn" onclick="SPIFFS_UploadFile();">
                            <svg width='1.3em' height='1.2em' viewBox='0 0 1300 1200'>
                                <g transform='translate(0,1200) scale(1, -1)'>
                                    <path fill='currentColor' d='M600 1177q117 0 224 -45.5t184.5 -123t123 -184.5t45.5 -224t-45.5 -224t-123 -184.5t-184.5 -123t-224 -45.5t-224 45.5t-184.5 123t-123 184.5t-45.5 224t45.5 224t123 184.5t184.5 123t224 45.5zM600 1027q-116 0 -214.5 -57t-155.5 -155.5t-57 -214.5t57 -214.5 t155.5 -155.5t214.5 -57t214.5 57t155.5 155.5t57 214.5t-57 214.5t-155.5 155.5t-214.5 57zM632 914l223 -275q13 -16 8 -27.5t-26 -11.5h-137v-275q0 -10 -7.5 -17.5t-17.5 -7.5h-150q-10 0 -17.5 7.5t-7.5 17.5v275h-137q-21 0 -26 11.5t8 27.5l223 275q13 16 32 16 t32 -16z'></path>
                                </g>
                            </svg>
                        </button>
                        <progress style="display:none;" name="prg" id="SPIFFS_prg" max="100"></progress>
                        &nbsp;
                        <span id="uploadSPIFFSmsg" style="display:none;" translate>Uploading</span>
                    </div>

                    <br><br>
                    <div class="panel">
                        <div class="panel-body">
                            <div class="panel-flex-row">
                                <button onclick="SPIFFS_Createdir()" class="btn btn-info btn-svg-no_pad">
                                    <svg width="35px" height="25px" viewBox="0 0 40 30">
                                        <rect x="5" y="10" width="30" height="20" rx="2" ry="2" fill="currentColor"></rect>
                                        <rect x="20" y="5" width="15" height="15" rx="2" ry="2" fill="currentColor"></rect>
                                        <text x="15" y="25" font-size="18" font-weight="800" fill="#5BC0DE">+</text>
                                    </svg>
                                </button>
                                <div id="SPIFFS_loader" class="loader" style="width:2em;height:2em;"></div>
                                <div id="SPIFFS_path" class="info">&nbsp;</div>
                            </div>
                            <table class="table table-striped" style="border:1px;solid #dddddd;margin-bottom:20px;">
                                <thead>
                                    <tr>
                                        <th width="0%" translate>Type</th>
                                        <th width="auto" translate>Name</th>
                                        <th translate>Size</th>
                                        <th width="0%"></th>
                                    </tr>
                                </thead>
                                <tbody id="SPIFFS_file_list"></tbody>
                            </table>
                        </div>
                        <div class="panel-footer" id="SPIFFS_status"></div>
                    </div>
                </div>
            </div>


        </div>
        <div class="modal-footer">
            <div style="float:right; padding-right:20px;">
                <table>
                    <tr>
                        <td>
                            <button class="btn btn-warning " onclick="closeSPIFFSDialog('cancel') " translate>Close</button>
                        </td>
                        <td>
                            <span class=""> &nbsp;&nbsp;</span>
                        </td>
                        <td>
                            <button class="btn btn-primary" id="refreshSPIFFSbtn" onclick="refreshSPIFFS() ">
                                <svg width="1.3em" height="1.2em" viewBox="0 0 1300 1200">
                                    <g transform="translate(50,1200) scale(1, -1)">
                                        <path fill="currentColor" d="M947 1060l135 135q7 7 12.5 5t5.5 -13v-361q0 -11 -7.5 -18.5t-18.5 -7.5h-361q-11 0 -13 5.5t5 12.5l134 134q-110 75 -239 75q-116 0 -214.5 -57t-155.5 -155.5t-57 -214.5h-150q0 117 45.5 224t123 184.5t184.5 123t224 45.5q192 0 347 -117zM1027 600h150 q0 -117 -45.5 -224t-123 -184.5t-184.5 -123t-224 -45.5q-192 0 -348 118l-134 -134q-7 -8 -12.5 -5.5t-5.5 12.5v360q0 11 7.5 18.5t18.5 7.5h360q10 0 12.5 -5.5t-5.5 -12.5l-133 -133q110 -76 240 -76q116 0 214.5 57t155.5 155.5t57 214.5z"></path>
                                    </g>
                                </svg>
                            </button>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <!-- /SPIFFS content -->
</div>
<!-- /SPIFFS Modal -->