How do I unpackage zip file containing multiple files and push those files to my dropzone uploader

Question

I'm trying to unzip a file, and send the uncompressed files that were inside back into dropzone uploader

I have a multi file uploader using Dropzone.js. This works amazingly well for multiple files, however I'm trying to get it to extract(unzip) a zip file, and then take the contents of that zip and re-push them back into Dropzone.js uploader.

I have tried using zip.js, and JSZip and i get to the point where i get the blob objects or (workers) but then I have no clue on how to make them go back into the uploader, as if I selected "Upload" and grabbed the files and dropped them in.

The Dropzone uploader submits on drop/ file select. Perhaps im just not keen on how an unzip process works in the browser, or if what im trying to do can be done at all??

Im looking to do this on the browser side to use some of my logic i have already in place for uploading time, and processing time when the file hits our server.

Let me know if theres anything else I need to add, basically mixing just dropzone.js code with zip.js code to accomplish what im looking for. Thanks in advance!

example:

var mediaDropzone = new Dropzone("#media-dropzone", {
   dictDefaultMessage: "Click or Drop files here to upload",
   dictInvalidFileType: "You can't upload files of this type.",
  });
  Dropzone.options.mediaDropzone = false;
  mediaDropzone.options.acceptedFiles = ".csv,.xls,.xlsx,.txt,.zip";
  mediaDropzone.on("sending", function(files, xhr, formData){
    if (files.type === "application/zip"){
        console.log(jQuery.type(files));
        unzipBlob(files, function(unzippedBlob) {
          // logs the uncompressed Blob
          console.log(unzippedBlob);
          });
        this.removeFile(files)
    }
      formData.append("fileuuid", files.upload.uuid);
  });
  mediaDropzone.on("complete", function(files) {
    var _this = this;
      setTimeout(function(){
        var acceptedFiles = _this.getAcceptedFiles();
        var rejectedFiles = _this.getRejectedFiles();

        for(var index = 0; index < acceptedFiles.length; index++) {
          var file = acceptedFiles[index];
          console.log(jQuery.type(file));
          if (file.status == "success") {
            appendContent(file.status, file.name, file.upload.uuid);
            _this.removeFile(file)
          }
        }

        if(acceptedFiles.length != 0) {
          alertify.success('Uploaded ' + acceptedFiles.length + ' files successfully.');
        }
        if(rejectedFiles.length != 0) {
          alertify.error('Error uploading ' + rejectedFiles.length + ' files.');
        }
      }, 2000);
  });
});

function unzipBlob(blob, callback) {
  // use a zip.BlobReader object to read zipped data stored into blob variable
  zip.createReader(new zip.BlobReader(blob), function(zipReader) {
    // get entries from the zip file
    zipReader.getEntries(function(entries) {
      // get data from the first file
      console.log(entries.length);
      for(var index = 0; index < entries.length; index++) {
        var file = entries[index];
          file.getData(new zip.BlobWriter("text/plain"), function(data) {
  // close the reader and calls callback function with uncompressed data as parameter
          console.log("DATA::: " + data.data());
          zipReader.close();
          callback(data);
         });
      };
    });
  }, onerror);
}

In case anyone else was having this same issue, I have come up with a solution, after some research. Hopefully this helps anyone else!

if (files.type === "application/zip"){
  var zip = new JSZip();
  zip.loadAsync( files /* = file blob */)
     .then(function(zip) {
       return jQuery.map(Object.keys(zip.files), function(filename) {
         return zip.files[filename].async('blob').then(function (fileData) {
           if (filename.includes("_MAC")){
            void(0)
          } else {
              var bloblextracted = new File([fileData], filename);
              mediaDropzone.addFile(bloblextracted);
          }
        })
       })
     }, function() {alert("Not a valid zip file")});
this.removeFile(files)
void(0)}