block uploading multiple files using dropzone

DevinoSolutions · Sep 4, 2023 · 9fc82a4 · 9fc82a4
1 parent 187a869
commit 9fc82a4
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/src/UpupUploader.tsx b/src/UpupUploader.tsx
@@ -231,6 +231,7 @@ export const UpupUploader: FC<UpupUploaderProps & RefAttributes<any>> =
                         <DropZone
                             setFiles={setFiles}
                             setIsDragging={setIsDragging}
+                            multiple={multiple}
                         />
                     )}
                 </AnimatePresence>

diff --git a/src/components/UpupUploader/DropZone.tsx b/src/components/UpupUploader/DropZone.tsx
@@ -5,9 +5,11 @@ import { TbUpload } from 'react-icons/tb'
 export default function DropZone({
     setFiles,
     setIsDragging,
+    multiple,
 }: {
     setFiles: React.Dispatch<React.SetStateAction<File[]>>
     setIsDragging: React.Dispatch<React.SetStateAction<boolean>>
+    multiple?: boolean
 }) {
     return (
         <motion.div
@@ -32,7 +34,12 @@ export default function DropZone({
                 className="w-full h-full absolute top-0 opacity-0"
                 multiple
                 onChange={e => {
-                    setFiles(prev => [...prev, ...Array.from(e.target.files!)])
+                    setFiles(prev =>
+                        multiple
+                            ? [...prev, ...Array.from(e.target.files!)]
+                            : // only one file
+                              [e.target.files![0]],
+                    )
                     setIsDragging(false)
                 }}
                 onDrop={e => {