From b190cac7064ad3dffb770c5a83d3db4a14d39607 Mon Sep 17 00:00:00 2001
From: Cafe137 <77121044+Cafe137@users.noreply.github.com>
Date: Sun, 20 Jun 2021 11:39:34 +0200
Subject: [PATCH] fix: clear dropzone state after upload (#150)

* fix: clear dropzone state after upload

* fix: avoid state update on unmounted component
---
 src/pages/files/Upload.tsx | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/pages/files/Upload.tsx b/src/pages/files/Upload.tsx
index 3c5acb3..fbb29d0 100644
--- a/src/pages/files/Upload.tsx
+++ b/src/pages/files/Upload.tsx
@@ -15,6 +15,7 @@ import SelectStamp from './SelectStamp'
 const MAX_FILE_SIZE = 1_000_000_000 // 1 gigabyte
 
 export default function Files(): ReactElement {
+  const [dropzoneKey, setDropzoneKey] = useState(0)
   const [file, setFile] = useState<File | null>(null)
   const [uploadReference, setUploadReference] = useState('')
   const [isUploadingFile, setIsUploadingFile] = useState(false)
@@ -43,8 +44,11 @@ export default function Files(): ReactElement {
     beeApi.files
       .uploadFile(selectedStamp.batchID, file)
       .then(hash => {
-        setUploadReference(hash)
-        setFile(null)
+        window.setTimeout(() => {
+          setFile(null)
+          setUploadReference(hash)
+          setDropzoneKey(dropzoneKey + 1)
+        }, 0)
       })
       .catch(e => enqueueSnackbar(`Error uploading: ${e.message}`, { variant: 'error' }))
       .finally(() => {
@@ -55,14 +59,18 @@ export default function Files(): ReactElement {
   const handleChange = (files?: File[]) => {
     if (files) {
       setFile(files[0])
-      setUploadReference('')
     }
   }
 
   return (
     <div>
       <div>
-        <DropzoneArea onChange={handleChange} filesLimit={1} maxFileSize={MAX_FILE_SIZE} />
+        <DropzoneArea
+          key={'dropzone-' + dropzoneKey}
+          onChange={handleChange}
+          filesLimit={1}
+          maxFileSize={MAX_FILE_SIZE}
+        />
         <div style={{ marginTop: '15px' }}>
           {selectedStamp && (
             <div style={{ display: 'flex' }}>