feat(custom-dropzown): zip multiple files

package-lock.json

@@ -10638,6 +10638,11 @@
         "pngquant-bin": "^6.0.0"
       }
     },
+    "immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha1-nbHb0Pr43m++D13V5Wu2BigN5ps="
+    },
     "import-cwd": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz",
@@ -11648,6 +11653,17 @@
         "object.assign": "^4.1.2"
       }
     },
+    "jszip": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.5.0.tgz",
+      "integrity": "sha512-WRtu7TPCmYePR1nazfrtuF216cIVon/3GWOvHS9QR5bIwSbnxtdpma6un3jyGGNhHsKCSzn5Ypk+EkDRvTGiFA==",
+      "requires": {
+        "lie": "~3.3.0",
+        "pako": "~1.0.2",
+        "readable-stream": "~2.3.6",
+        "set-immediate-shim": "~1.0.1"
+      }
+    },
     "junk": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/junk/-/junk-3.1.0.tgz",
@@ -11721,6 +11737,14 @@
         "type-check": "~0.4.0"
       }
     },
+    "lie": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
+      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+      "requires": {
+        "immediate": "~3.0.5"
+      }
+    },
     "lines-and-columns": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz",
@@ -16527,6 +16551,11 @@
       "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
       "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc="
     },
+    "set-immediate-shim": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz",
+      "integrity": "sha1-SysbJ+uAip+NzEgaWOXlb1mfP2E="
+    },
     "set-value": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.1.tgz",

package.json

@@ -31,6 +31,7 @@
     "gatsby-source-filesystem": "^2.8.1",
     "gatsby-transformer-sharp": "^2.9.0",
     "google-maps-react": "^2.0.6",
+    "jszip": "^3.5.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-dropzone": "^11.2.4",

src/components/custom-dropzone.js

@@ -1,5 +1,6 @@
 import React, { useCallback } from "react";
 import { useDropzone } from "react-dropzone";
+import JSZip from "jszip";
 import styled from "@emotion/styled";
 import { Text } from ".";
 
@@ -21,7 +22,19 @@ const Container = styled.div`
 
 export default function CustomDropzone({ name, files, setFiles, ...other }) {
   const onDrop = useCallback(acceptedFiles => {
+    if (acceptedFiles.length > 1) {
+      const zip = new JSZip();
+      acceptedFiles.forEach(file => zip.file(file.name, file));
+      zip.generateAsync({ type: "blob" }).then(blob => {
+        const zippedFiles = new File([blob], "files.zip", {
+          lastModified: Date.now(),
+          type: "application/zip"
+        });
+        setFiles(zippedFiles);
+      });
+    } else {
       setFiles(acceptedFiles[0]);
+    }
   }, []);
   const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
   return (