Zip file before uploading in Dropzone

Question

Is there a way to generate zip from file dropped in dropzone and then send that zip file to server?

I'm generating zip from the file using JSZip in sending event of dropzone:

this.on("sending", function(file, xhr, formData) {
  var zip = new JSZip();
  zip.file("Hello.csv", file);
  zip.generateAsync({ type: "blob" }).then(function(content) {
    // see FileSaver.js
    saveAs(content, "example.zip");
  });
});

How do I make dropzone to send this file instead of the one user added?

Answer 1

This worked for me on dropzone 5.7.0, but I used the "addedFile" event instead:

this.on("addedfile", function (file) {
  if (file.done) {
    return;
  }
  const dz = this;
  dz.removeFile(file);
  let z = new JSZip();
  z.file(file.name, file);
  z.generateAsync({ 
    type: "blob",
    compression: "DEFLATE",
    compressionOptions: { level: 9}
    }).then(function(content) {    
      let f = new File([content], file.name);
      f.done = true;
      dz.addFile(f);
  });
});

I added compression (the default for JSZip is STORE) and retained the file.name to make the zipping transparent to the user (however they will still see the smaller size).

p.s. I'm not loving the addition of the f.done field either...better solutions are welcome.