From 5ea69b129d4d850ced2ffc524b29afe3f6c60d1b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vladan=20Tomi=C4=87?= <tomic.vladan.mail@gmail.com>
Date: Tue, 19 Sep 2023 10:50:33 +0200
Subject: [PATCH] feat: multiple file upload (#499)

---
 .../UploadFileModal/UploadFileModal.tsx       | 37 +++++++++++--------
 1 file changed, 22 insertions(+), 15 deletions(-)

diff --git a/src/components/Modals/UploadFileModal/UploadFileModal.tsx b/src/components/Modals/UploadFileModal/UploadFileModal.tsx
index 7b9ebc39..e91b75ca 100644
--- a/src/components/Modals/UploadFileModal/UploadFileModal.tsx
+++ b/src/components/Modals/UploadFileModal/UploadFileModal.tsx
@@ -33,20 +33,20 @@ const UploadFileModal: FC<CreatorModalProps> = ({
   const [loading, setLoading] = useState(false);
   const [message, setMessage] = useState<string | null>(null);
 
-  const [fileToUpload, setFileToUpload] = useState(null);
+  const [filesToUpload, setFilesToUpload] = useState(null);
   const [errorMessage, setErrorMessage] = useState('');
   const { fdpClientRef, getAccountAddress } = useFdpStorage();
   const { getRootProps, getInputProps } = useDropzone({
     onDrop: (acceptedFiles: any) => {
       if (activePod) {
-        setFileToUpload(acceptedFiles[0]);
+        setFilesToUpload(acceptedFiles);
       }
     },
   });
   const { intl } = useLocales();
 
   const handleUpload = async () => {
-    if (!(fileToUpload && activePod)) {
+    if (!(filesToUpload && activePod)) {
       return;
     }
 
@@ -55,11 +55,15 @@ const UploadFileModal: FC<CreatorModalProps> = ({
       const userAddress = await getAccountAddress();
       const directory = directoryName || 'root';
       const fdpPath = getFdpPathByDirectory(directory);
-      const item = await uploadFile(fdpClientRef.current, {
-        file: fileToUpload,
-        directory: directoryName,
-        podName: activePod,
-      });
+      const items = await Promise.all(
+        filesToUpload.map((file) =>
+          uploadFile(fdpClientRef.current, {
+            file,
+            directory: directoryName,
+            podName: activePod,
+          })
+        )
+      );
 
       trackEvent({
         category: 'Upload',
@@ -69,7 +73,9 @@ const UploadFileModal: FC<CreatorModalProps> = ({
         href: window.location.href,
       });
 
-      addItemToCache(userAddress, activePod, fdpPath, item, ContentType.FILE);
+      items.forEach((item) =>
+        addItemToCache(userAddress, activePod, fdpPath, item, ContentType.FILE)
+      );
       updateDrive({
         isUseCacheOnly: true,
       });
@@ -113,11 +119,12 @@ const UploadFileModal: FC<CreatorModalProps> = ({
         </p>
       </div>
 
-      {fileToUpload ? (
-        <p className="mt-5 text-sm text-center text-color-shade-light-2-night">
-          {intl.get('READY_TO_UPLOAD')} <strong>{fileToUpload?.name}</strong>
-        </p>
-      ) : null}
+      {filesToUpload &&
+        filesToUpload.map((file) => (
+          <p className="mt-5 text-sm text-center text-color-shade-light-2-night">
+            {intl.get('READY_TO_UPLOAD')} <strong>{file?.name}</strong>
+          </p>
+        ))}
 
       {errorMessage ? (
         <div className="mt-10 text-color-status-negative-day text-xs text-center leading-none">
@@ -131,7 +138,7 @@ const UploadFileModal: FC<CreatorModalProps> = ({
           variant="primary-outlined"
           label={intl.get('UPLOAD_CONTENT')}
           onClick={handleUpload}
-          disabled={!fileToUpload || loading}
+          disabled={!filesToUpload || loading}
           loading={loading}
         />
       </div>