Merge pull request #293 from naveteam/fix/upload-controlled-value

fix: add controlled option to upload component
naveteam · Sep 16, 2022 · ed454aa · ed454aa
2 parents b7ce9b1 + 0d1b7f1
commit ed454aa
Showing 1 changed file with 32 additions and 12 deletions.
diff --git a/src/components/Upload/Upload.jsx b/src/components/Upload/Upload.jsx
@@ -22,19 +22,28 @@ const UploadButton = forwardRef(
       fileHandler,
       defaultValue,
       resetValue,
+      value,
       ...props
     },
     ref
   ) => {
-    const [uploadedFiles, setUploadedFiles] = useState()
+    const [internalUploadedFiles, setInternalUploadFiles] = useState()
+
+    const uploadedFiles = value || internalUploadedFiles || []
 
     useEffect(() => {
-      setUploadedFiles(resetValue)
+      setInternalUploadFiles(resetValue)
     }, [JSON.stringify(resetValue)])
 
     const handleChange = event => {
-      setUploadedFiles(event.target.files)
-      fileHandler && fileHandler(event)
+      const dataTransfer = new DataTransfer()
+
+      if (multipleFiles) {
+        uploadedFiles.forEach(e => dataTransfer.items.add(e))
+      }
+      event.target.files.forEach(e => dataTransfer.items.add(e))
+      setInternalUploadFiles(dataTransfer.files)
+      fileHandler && fileHandler({ target: { files: dataTransfer.files } })
     }
 
     return (
@@ -50,6 +59,7 @@ const UploadButton = forwardRef(
           justifyContent='center'
         >
           <HiddenInput
+            value={value}
             type='file'
             ref={ref}
             name={name}
@@ -66,7 +76,7 @@ const UploadButton = forwardRef(
               file={file}
               onView={() => window.open(URL.createObjectURL(file))}
               onDelete={() => {
-                setUploadedFiles(uploadedFiles =>
+                setInternalUploadFiles(uploadedFiles =>
                   Object.values(uploadedFiles).filter(element => element.name !== file.name)
                 )
                 fileHandler && fileHandler({ target: { name } })
@@ -90,21 +100,30 @@ const UploadDragAndDrop = forwardRef(
       fileHandler,
       defaultValue,
       resetValue,
+      value,
       ...props
     },
     ref
   ) => {
-    const [uploadedFiles, setUploadedFiles] = useState([])
+    const [internalUploadedFiles, setInternalUploadFiles] = useState([])
     const [error, setError] = useState(false)
 
+    const uploadedFiles = value || internalUploadedFiles
+
     useEffect(() => {
-      setUploadedFiles(resetValue)
+      setInternalUploadFiles(resetValue)
     }, [JSON.stringify(resetValue)])
 
     const handleChange = event => {
       try {
-        setUploadedFiles(event.target.files)
-        fileHandler && fileHandler(event)
+        const dataTransfer = new DataTransfer()
+
+        if (multipleFiles) {
+          uploadedFiles.forEach(e => dataTransfer.items.add(e))
+        }
+        event.target.files.forEach(e => dataTransfer.items.add(e))
+        setInternalUploadFiles(dataTransfer.files)
+        fileHandler && fileHandler({ target: { files: dataTransfer.files } })
       } catch (err) {
         console.log(err)
         setError(true)
@@ -121,6 +140,7 @@ const UploadDragAndDrop = forwardRef(
           multiple={multipleFiles}
           accept={handleAcceptedFileTypes(acceptedFileTypes)}
           defaultValue={defaultValue}
+          value={value}
         />
         <StyledButton
           uploadedFiles={uploadedFiles}
@@ -129,7 +149,7 @@ const UploadDragAndDrop = forwardRef(
           }}
           onDrop={e => {
             e.preventDefault()
-            setUploadedFiles(e.dataTransfer.files)
+            setInternalUploadFiles(e.dataTransfer.files)
           }}
           py={5}
           disabled={disabled}
@@ -147,7 +167,7 @@ const UploadDragAndDrop = forwardRef(
               error={error}
               onView={() => window.open(URL.createObjectURL(file))}
               onDelete={() => {
-                setUploadedFiles(uploadedFiles =>
+                setInternalUploadFiles(uploadedFiles =>
                   Object.values(uploadedFiles).filter(element => element.name !== file.name)
                 )
                 fileHandler && fileHandler({ target: { name } })
@@ -355,7 +375,7 @@ const StyledImage = styled.img`
 const StyledButton = styled(Button)`
   border-color: ${props => props.theme.colors.primary};
   border-width: 1px;
-  border-style: ${props => (props.uploadedFiles.length === 0 ? 'dashed' : 'solid')};
+  border-style: ${props => (props?.uploadedFiles?.length === 0 ? 'dashed' : 'solid')};
 `
 
 const ImageUpload = styled(Button)`