Как извлечь папку из zip файла при загрузке с помощью html и javascript и django

Я работаю над приложением django, в котором html код под названием tool.hmtl вместе с javascript кодом под названием myscripts.js позволяют пользователю загружать папку и затем выполнять некоторую обработку этих данных. Соответствующий раздел tool.hmtl приведен ниже.

<main class="tool mg-t-900">
  <div id="folderUploadDiv">
    <h1 class="tool__heading | text-center text-capitalize">
      Upload your folder here
    </h1>
    <label
      for="folder"
      class="tool__upload | flex flex-center flex-column mg-t-500 text-center"
    >
      <i class="ri-upload-cloud-line tool__icon"></i>
      <p class="tool__txt text-capitalize">Browse folder to upload</p>
    </label>
    <input type="file" id="folder" webkitdirectory multiple />

.............some code......


<script src="{% static 'myscripts.js' %}"></script>

   <script src="{% static 'app.js' %}"></script>
    <script>
      const fileInput = document.querySelector("#folder");
      const loder = document.querySelector(".loder");
      const toggleLoder = function () {
        loder.classList.add("active");
        setTimeout(() => {
          loder.classList.remove("active");
        }, 30000);
        startTypingAnimation();
      };
      fileInput.addEventListener("change", toggleLoder);
      function startTypingAnimation() {
        new TypeIt("#loder-text", {
          strings: "Your file is being prepared...",
          speed: 75,
          loop: true,
        }).go();
      }
    </script>
    <script>
      setTimeout(function () {
        location.reload();
      }, 300000); // refresh every 5 minutes (300000 milliseconds)
    </script>
  </body>
</html>

{% endblock %}

и соответствующий раздел myscripts.js выглядит следующим образом.

// const axios = require('axios');

$("#folderUploadDiv").show();
$("#selectorDiv").hide();


username = "";
contentType = "";


var dataToSend = []
var flag=1
document.getElementById("folder").addEventListener("change",  function(event) {
    var output = document.querySelector("ul");
    var files = event.target.files;
    var jsonFiles =0;
    var rightOrderFiles = [];
    for (var i=0; i<files.length; i++) {
      var item = document.createElement("li");
      var innerFiles = files[i].webkitRelativePath.split("/");
      if(innerFiles.length ===4){
            jsonFiles++;
            rightOrderFiles.push(files[i].webkitRelativePath)
            var reader = new FileReader();
            reader.onload =  onReaderLoad;
            reader.readAsText(files[i]);
      }
    //   console.log("file path : ", files[i].webkitRelativePath);
      item.innerHTML = files[i].webkitRelativePath;
      output.appendChild(item);
    };
  }, false);
  

В этом фрагменте кода (как HTML, так и Javascript) мы видим, что пользователь загружает папку, а затем некоторая обработка выполняется в Javascript.

Мой вопрос в том, как я могу изменить код в tool.hmtl вместе с кодом javascript myscripts.js таким образом, чтобы пользователь загружал zip файл и папка извлекалась из этого zip файла, а не пользователь загружал саму папку. Все остальное остается неизменным, единственное изменение, которое необходимо, это позволить пользователю загружать zip файл вместо папки напрямую, а папка затем извлекается из zip файла.

<input type="file" id="folder" accept=".zip" multiple />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.5.0/jszip.min.js"></script>

document.getElementById("folder").addEventListener("change", function(event) {
  var output = document.querySelector("ul");
  var files = event.target.files;
  var jsonFiles = 0;
  var rightOrderFiles = [];
  for (var i = 0; i < files.length; i++) {
    JSZip.loadAsync(files[i])
      .then(function(zip) {
        var zipFiles = zip.files;
        Object.keys(zipFiles).forEach(function(filename) {
          var item = document.createElement("li");
          var innerFiles = filename.split("/");
          if (innerFiles.length === 4) {
            jsonFiles++;
            rightOrderFiles.push(filename);
            zip.files[filename].async("text").then(function(fileData) {
              var reader = new FileReader();
              reader.onload = onReaderLoad;
              reader.readAsText(new Blob([fileData]));
            });
          }
          item.innerHTML = filename;
          output.appendChild(item);
        });
      })
      .catch(function(error) {
        console.error("Error in extracting zip file:", error);
      });
  }
});

<input type="file" id="folder" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.2.2/jszip.min.js"></script>

document.getElementById("folder").addEventListener("change",  function(event) {
  var output = document.querySelector("ul");
  var file = event.target.files[0];
  var reader = new FileReader();
  reader.onload = function (e) {
    var zip = new JSZip();
    zip.loadAsync(e.target.result)
      .then(function (zip) {
        var rightOrderFiles = [];
        var jsonFiles = 0;
        zip.forEach(function (relativePath, file) {
          if (relativePath.split("/").length === 4) {
            jsonFiles++;
            rightOrderFiles.push(relativePath);
            file.async("text").then(function (content) {
              var item = document.createElement("li");
              item.innerHTML = relativePath;
              output.appendChild(item);
            });
          }
        });
      });
  };
  reader.readAsArrayBuffer(file);
}, false);