2018-11-17

Das Webinterface zum Esp32 Spiffs Datei Manager.

spiffs.html

<!-- For more information visit: https://fipsok.de -->
<!DOCTYPE HTML>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style32.css">
    <title>Esp32 Datei Manager</title>
    <script>
      function list() {
        var myList = document.querySelector('main');
        fetch('json').then(function (response) {
          return response.json();
        }).then(function (json) {
          for (var i = 0; i < json.dir.length - 1; i++) {
            let listItem = document.createElement('li');
            listItem.innerHTML = `<a href ="${json.dir[i].name}">${json.dir[i].name}</a><small> ${json.dir[i].size}</small>
      	    <a href ="${json.dir[i].name}"download="${json.dir[i].name}"> Download </a>`;
            if (json.dir[i].name != 'spiffs.html') {
              listItem.innerHTML += `or <a href ="${json.dir[i].name}?delete=/${json.dir[i].name}">Delete </a>`;
            }
            myList.appendChild(listItem);
          }
          var listItem = document.createElement('li');
          listItem.innerHTML = `<b>SPIFFS</b> belegt ${json.dir[i].usedBytes} von ${json.dir[i].totalBytes}`;
          myList.appendChild(listItem);
          free = json.dir[i].freeBytes;
        });
      }
      function fileSize() {
        var nBytes = document.querySelector('input').files[0].size;
        var sOutput = `${nBytes} Byte`;
        for (let aMultiples = [
          ' KB',
          ' MB'
        ], nMultiple = 0, nApprox = nBytes / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
          var sOutput = nApprox.toFixed(2) + aMultiples[nMultiple];
        }
        if (nBytes > free) {
          document.querySelector('span').innerHTML = `<li><small>Dateigröße: ${sOutput}</small><strong style="color: red;"> Ungenügend Speicher frei </strong></li>`;
          document.querySelector('button').setAttribute('disabled', 'disabled');
        } 
        else {
          document.querySelector('span').innerHTML = `<li><b>Dateigröße:</b> ${sOutput}</li>`;
          document.querySelector('button').removeAttribute('disabled');
        }
      }
      function jn() {
        return confirm(`Wirklich formatieren? Alle Daten gehen verloren.\nDu musst anschließend spiffs.html wieder laden.`);
      }
      document.addEventListener('DOMContentLoaded', list);
    </script>
  </head>
  <body>
    <h2>ESP32 Datei Manager</h2>
    <form action="/upload" method="POST" enctype="multipart/form-data"><input type="file" name="upload" onchange="fileSize()">
      <button type="submit" disabled>Upload</button>
    </form>
    <div>
      <span></span>
      <main></main>
    </div>
    <form action="/format" method="POST"><input class="button" type="submit" value="Format SPIFFS" onclick="return jn()"></form>
  </body>
</html>

Zurück