diff --git a/package-lock.json b/package-lock.json index 9de3cd7..5077624 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index b37f28b..1f68efd 100644 --- a/package.json +++ b/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", diff --git a/src/components/custom-dropzone.js b/src/components/custom-dropzone.js index 3978ba9..def95f0 100644 --- a/src/components/custom-dropzone.js +++ b/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 => { - setFiles(acceptedFiles[0]); + 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 (