From 15ee2316feea97b643050887c636af7698b8df57 Mon Sep 17 00:00:00 2001
From: Wallys Ferreira <wallysfsilva@gmail.com>
Date: Thu, 25 Jan 2024 23:55:52 +0000
Subject: [PATCH 1/9] feat: add property 'multiple' to file input

---
 ui/src/components/docs-input.tsx  | 1 +
 ui/src/components/image-input.tsx | 1 +
 2 files changed, 2 insertions(+)

diff --git a/ui/src/components/docs-input.tsx b/ui/src/components/docs-input.tsx
index 2d5893d..b9e7f3f 100644
--- a/ui/src/components/docs-input.tsx
+++ b/ui/src/components/docs-input.tsx
@@ -32,6 +32,7 @@ const DocsInput: React.FC<{
           onChange={getFileName}
           type="file"
           accept="text/plain, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.openxmlformats-officedocument.presentationml.presentation, application/pdf, application/rtf, application/x-freearc"
+          multiple
           name="document"
           id="document"
           aria-label="Select document"
diff --git a/ui/src/components/image-input.tsx b/ui/src/components/image-input.tsx
index b20890e..fc0220d 100644
--- a/ui/src/components/image-input.tsx
+++ b/ui/src/components/image-input.tsx
@@ -32,6 +32,7 @@ const ImageInput: React.FC<{
           onChange={getFileName}
           type="file"
           accept="image/jpeg, image/png, image/jpg, image/webp, image/gif, image/bmp"
+          multiple
           name="image"
           id="image"
           aria-label="Select image"

From 215bc4319320019a27447e777cff33b6557e0be8 Mon Sep 17 00:00:00 2001
From: Wallys Ferreira <wallysfsilva@gmail.com>
Date: Fri, 26 Jan 2024 00:22:00 +0000
Subject: [PATCH 2/9] feat: sends multiple documents or images to api

---
 ui/src/components/upload.tsx | 33 +++++++++++++++++----------------
 1 file changed, 17 insertions(+), 16 deletions(-)

diff --git a/ui/src/components/upload.tsx b/ui/src/components/upload.tsx
index b259cc8..bf27fc5 100644
--- a/ui/src/components/upload.tsx
+++ b/ui/src/components/upload.tsx
@@ -28,24 +28,25 @@ const Upload = () => {
 
     if (files !== null && files !== undefined) {
       toast.loading("Uploading...");
-      const toUpload = files[0];
-      const form = new FormData();
       const type = tab === "docs" ? "doc" : "image";
-      form.append(type, toUpload);
-      axios
-        .post<{ url: string }>(`/api/cdn/upload/${type}`, form)
-        .then((res) => {
-          if (res.status === 200) {
+
+      for (let file of files) {
+        const form = new FormData();
+        form.append(type, file);
+        axios
+          .post<{ url: string }>(`/api/cdn/upload/${type}`, form)
+          .then((res) => {
+            if (res.status === 200) {
+              toast.dismiss();
+              toast.success("Successfully uploaded file!");
+              getSize(setSize, setLoading);
+            }
+          })
+          .catch((err: Error) => {
             toast.dismiss();
-            toast.success("Successfully uploaded file!");
-            getSize(setSize, setLoading);
-            location.reload();
-          }
-        })
-        .catch((err: Error) => {
-          toast.dismiss();
-          toast.error(err.message);
-        });
+            toast.error(err.message);
+          });
+      }
     }
   };
 

From 56c05d3d73f79d0a05c2b6c2de4691f035b695c6 Mon Sep 17 00:00:00 2001
From: Wallys Ferreira <wallysfsilva@gmail.com>
Date: Fri, 26 Jan 2024 02:00:26 +0000
Subject: [PATCH 3/9] fix: show icon for each file being uploaded

---
 ui/src/components/docs-input.tsx  | 28 +++++++++++++++++++---------
 ui/src/components/image-input.tsx | 29 ++++++++++++++++++++---------
 2 files changed, 39 insertions(+), 18 deletions(-)

diff --git a/ui/src/components/docs-input.tsx b/ui/src/components/docs-input.tsx
index b9e7f3f..c850a67 100644
--- a/ui/src/components/docs-input.tsx
+++ b/ui/src/components/docs-input.tsx
@@ -4,22 +4,32 @@ import { FileText } from "lucide-react";
 const DocsInput: React.FC<{
   fileRef: React.RefObject<HTMLInputElement>;
 }> = ({ fileRef }) => {
-  const [fileName, setFileName] = useState<undefined | string>(undefined);
+  const [fileNames, setFileNames] = useState<string[]>([]);
 
-  const getFileName = () => {
+  const getFileNames = () => {
     if (fileRef.current?.files != null) {
-      setFileName(fileRef.current.files[0].name);
+      let names = []
+
+      for (let file of fileRef.current.files) {
+        names.push(file.name)
+      }
+
+      setFileNames(names)
     }
   };
 
   return (
     <div className="my-8 flex flex-col justify-center items-center h-full">
       <div className="w-full h-full mb-4 flex justify-center items-center">
-        {fileName ? (
-          <div className="border rounded-lg w-64 min-h-[264px] max-w-[256px] flex flex-col overflow-hidden justify-center items-center">
-            <FileText size="128" />
-            {fileName}
-          </div>
+        {fileNames.length > 0 ? (
+          <section className="flex flex-row overflow-hidden">
+            {fileNames.map(fileName => (
+              <div className="border rounded-lg w-64 min-h-[264px] max-w-[256px] flex flex-col overflow-hidden justify-center items-center">
+                <FileText size="128" />
+                {fileName}
+              </div>
+            ))}
+          </section>
         ) : (
           <div className="border rounded-lg w-64 min-h-[264px] max-w-[256px] flex justify-center items-center">
             <FileText size="128" />
@@ -29,7 +39,7 @@ const DocsInput: React.FC<{
       <label htmlFor="document" className="flex flex-col">
         Select Document
         <input
-          onChange={getFileName}
+          onChange={getFileNames}
           type="file"
           accept="text/plain, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.openxmlformats-officedocument.presentationml.presentation, application/pdf, application/rtf, application/x-freearc"
           multiple
diff --git a/ui/src/components/image-input.tsx b/ui/src/components/image-input.tsx
index fc0220d..47bb489 100644
--- a/ui/src/components/image-input.tsx
+++ b/ui/src/components/image-input.tsx
@@ -4,22 +4,33 @@ import { useState } from "react";
 const ImageInput: React.FC<{
   fileRef: React.RefObject<HTMLInputElement>;
 }> = ({ fileRef }) => {
-  const [fileName, setFileName] = useState<undefined | string>(undefined);
+  const [fileNames, setFileNames] = useState<string[]>([]);
 
-  const getFileName = () => {
+  const getFileNames = () => {
     if (fileRef.current?.files != null) {
-      setFileName(fileRef.current.files[0].name);
+      let names = []
+
+      for (let file of fileRef.current.files) {
+        names.push(file.name)
+      }
+
+      setFileNames(names)
     }
   };
 
+
   return (
     <div className="my-8 flex flex-col justify-center items-center h-full">
       <div className="w-full h-full mb-4 flex justify-center items-center">
-        {fileName ? (
-          <div className="border rounded-lg w-64 min-h-[264px] max-w-[256px] flex flex-col justify-center overflow-hidden items-center">
-            <FileImage size="128" />
-            {fileName}
-          </div>
+        {fileNames.length > 0 ? (
+          <section className="flex flex-row overflow-hidden">
+            {fileNames.map(fileName => (
+              <div className="border rounded-lg w-64 min-h-[264px] max-w-[256px] flex flex-col justify-center overflow-hidden items-center">
+                <FileImage size="128" />
+                {fileName}
+              </div>
+            ))}
+          </section>
         ) : (
           <div className="border rounded-lg w-64 min-h-[264px] max-w-[256px] flex justify-center items-center">
             <FileImage size="128" />
@@ -29,7 +40,7 @@ const ImageInput: React.FC<{
       <label htmlFor="image" className="flex flex-col">
         Select Image
         <input
-          onChange={getFileName}
+          onChange={getFileNames}
           type="file"
           accept="image/jpeg, image/png, image/jpg, image/webp, image/gif, image/bmp"
           multiple

From d96d108598e42197de2551f2b743a170f63d203a Mon Sep 17 00:00:00 2001
From: Wallys Ferreira <wallysfsilva@gmail.com>
Date: Fri, 26 Jan 2024 02:29:34 +0000
Subject: [PATCH 4/9] fix: refresh page after uploading all files

---
 ui/src/components/upload.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/ui/src/components/upload.tsx b/ui/src/components/upload.tsx
index bf27fc5..ab4e99e 100644
--- a/ui/src/components/upload.tsx
+++ b/ui/src/components/upload.tsx
@@ -23,7 +23,7 @@ const Upload = () => {
 
   const file = useRef<HTMLInputElement>(null);
 
-  const uploadFile = () => {
+  const uploadFile = async () => {
     const files = file.current?.files;
 
     if (files !== null && files !== undefined) {
@@ -33,7 +33,8 @@ const Upload = () => {
       for (let file of files) {
         const form = new FormData();
         form.append(type, file);
-        axios
+
+        await axios
           .post<{ url: string }>(`/api/cdn/upload/${type}`, form)
           .then((res) => {
             if (res.status === 200) {
@@ -47,6 +48,8 @@ const Upload = () => {
             toast.error(err.message);
           });
       }
+
+      location.reload();
     }
   };
 

From b1c461ebf1be148d7007b8cf9b1968ade5e008be Mon Sep 17 00:00:00 2001
From: Wallys Ferreira <wallysfsilva@gmail.com>
Date: Fri, 26 Jan 2024 02:30:27 +0000
Subject: [PATCH 5/9] chore: add semicolons

---
 ui/src/components/docs-input.tsx  | 6 +++---
 ui/src/components/image-input.tsx | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/ui/src/components/docs-input.tsx b/ui/src/components/docs-input.tsx
index c850a67..7ec27aa 100644
--- a/ui/src/components/docs-input.tsx
+++ b/ui/src/components/docs-input.tsx
@@ -8,13 +8,13 @@ const DocsInput: React.FC<{
 
   const getFileNames = () => {
     if (fileRef.current?.files != null) {
-      let names = []
+      let names = [];
 
       for (let file of fileRef.current.files) {
-        names.push(file.name)
+        names.push(file.name);
       }
 
-      setFileNames(names)
+      setFileNames(names);
     }
   };
 
diff --git a/ui/src/components/image-input.tsx b/ui/src/components/image-input.tsx
index 47bb489..3edbc0b 100644
--- a/ui/src/components/image-input.tsx
+++ b/ui/src/components/image-input.tsx
@@ -8,13 +8,13 @@ const ImageInput: React.FC<{
 
   const getFileNames = () => {
     if (fileRef.current?.files != null) {
-      let names = []
+      let names = [];
 
       for (let file of fileRef.current.files) {
-        names.push(file.name)
+        names.push(file.name);
       }
 
-      setFileNames(names)
+      setFileNames(names);
     }
   };
 

From 7f9ccc27f51cd1e97c53eeb2ac9263e6168cf754 Mon Sep 17 00:00:00 2001
From: Wallys Ferreira <wallysfsilva@gmail.com>
Date: Fri, 26 Jan 2024 12:47:08 +0000
Subject: [PATCH 6/9] fix: cards overflow

---
 ui/src/components/docs-input.tsx     | 21 ++++--------------
 ui/src/components/image-input.tsx    | 19 +++-------------
 ui/src/components/upload-preview.tsx | 33 ++++++++++++++++++++++++++++
 ui/src/index.css                     |  4 ++++
 4 files changed, 44 insertions(+), 33 deletions(-)
 create mode 100644 ui/src/components/upload-preview.tsx

diff --git a/ui/src/components/docs-input.tsx b/ui/src/components/docs-input.tsx
index 7ec27aa..ceaec0d 100644
--- a/ui/src/components/docs-input.tsx
+++ b/ui/src/components/docs-input.tsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { FileText } from "lucide-react";
+import UploadPreview from "./upload-preview";
 
 const DocsInput: React.FC<{
   fileRef: React.RefObject<HTMLInputElement>;
@@ -19,22 +19,9 @@ const DocsInput: React.FC<{
   };
 
   return (
-    <div className="my-8 flex flex-col justify-center items-center h-full">
-      <div className="w-full h-full mb-4 flex justify-center items-center">
-        {fileNames.length > 0 ? (
-          <section className="flex flex-row overflow-hidden">
-            {fileNames.map(fileName => (
-              <div className="border rounded-lg w-64 min-h-[264px] max-w-[256px] flex flex-col overflow-hidden justify-center items-center">
-                <FileText size="128" />
-                {fileName}
-              </div>
-            ))}
-          </section>
-        ) : (
-          <div className="border rounded-lg w-64 min-h-[264px] max-w-[256px] flex justify-center items-center">
-            <FileText size="128" />
-          </div>
-        )}
+    <div className="my-8 flex max-h-[691px] flex-col justify-center items-center h-full">
+      <div className="w-full h-full mb-4 flex justify-center items-center overflow-hidden">
+        <UploadPreview fileNames={fileNames} type="docs"/>
       </div>
       <label htmlFor="document" className="flex flex-col">
         Select Document
diff --git a/ui/src/components/image-input.tsx b/ui/src/components/image-input.tsx
index 3edbc0b..dc8aa8c 100644
--- a/ui/src/components/image-input.tsx
+++ b/ui/src/components/image-input.tsx
@@ -1,5 +1,5 @@
-import { FileImage } from "lucide-react";
 import { useState } from "react";
+import UploadPreview from "./upload-preview";
 
 const ImageInput: React.FC<{
   fileRef: React.RefObject<HTMLInputElement>;
@@ -20,22 +20,9 @@ const ImageInput: React.FC<{
 
 
   return (
-    <div className="my-8 flex flex-col justify-center items-center h-full">
+    <div className="my-8 max-h-[691px] flex flex-col justify-center items-center h-full">
       <div className="w-full h-full mb-4 flex justify-center items-center">
-        {fileNames.length > 0 ? (
-          <section className="flex flex-row overflow-hidden">
-            {fileNames.map(fileName => (
-              <div className="border rounded-lg w-64 min-h-[264px] max-w-[256px] flex flex-col justify-center overflow-hidden items-center">
-                <FileImage size="128" />
-                {fileName}
-              </div>
-            ))}
-          </section>
-        ) : (
-          <div className="border rounded-lg w-64 min-h-[264px] max-w-[256px] flex justify-center items-center">
-            <FileImage size="128" />
-          </div>
-        )}
+        <UploadPreview fileNames={fileNames} type="images"/>
       </div>
       <label htmlFor="image" className="flex flex-col">
         Select Image
diff --git a/ui/src/components/upload-preview.tsx b/ui/src/components/upload-preview.tsx
new file mode 100644
index 0000000..f01548d
--- /dev/null
+++ b/ui/src/components/upload-preview.tsx
@@ -0,0 +1,33 @@
+import { FileText } from "lucide-react";
+import { FileImage } from "lucide-react";
+
+const UploadPreview = ({fileNames, type}: {fileNames: string[], type: string}) => {
+  if (fileNames.length >= 7) {
+    return (
+      <ul className="list-columns">
+        {fileNames.map(fileName => (
+          <li>{fileName}</li>
+        ))}
+      </ul>
+    );
+  } else if (fileNames.length > 0) {
+    return (
+      <section className="flex flex-row overflow-hidden">
+        {fileNames.map(fileName => (
+          <div className="border rounded-lg w-64 min-h-[264px] max-w-[256px] flex flex-col overflow-hidden justify-center items-center">
+            {type == "docs" ? <FileText size="128" /> : <FileImage size="128" />}
+            {fileName}
+          </div>
+        ))}
+      </section>
+    );
+  } else {
+    return (
+      <div className="border rounded-lg w-64 min-h-[264px] max-w-[256px] flex justify-center items-center">
+        {type == "docs" ? <FileText size="128" /> : <FileImage size="128" />}
+      </div>
+    );
+  }
+};
+
+export default UploadPreview;
\ No newline at end of file
diff --git a/ui/src/index.css b/ui/src/index.css
index 732ef6e..95f2c4b 100644
--- a/ui/src/index.css
+++ b/ui/src/index.css
@@ -99,4 +99,8 @@
 /* Show the tooltip text when you mouse over the tooltip container */
 .tooltip:hover .tooltiptext {
   visibility: visible;
+}
+
+.list-columns {
+  columns: 4;
 }
\ No newline at end of file

From dc5e3adb69c8e6338789d230888cc5689c51dcfb Mon Sep 17 00:00:00 2001
From: Wallys Ferreira <wallysfsilva@gmail.com>
Date: Fri, 26 Jan 2024 12:57:56 +0000
Subject: [PATCH 7/9] chore: add EOF

---
 ui/src/components/upload-preview.tsx | 2 +-
 ui/src/index.css                     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/src/components/upload-preview.tsx b/ui/src/components/upload-preview.tsx
index f01548d..b6a6de5 100644
--- a/ui/src/components/upload-preview.tsx
+++ b/ui/src/components/upload-preview.tsx
@@ -30,4 +30,4 @@ const UploadPreview = ({fileNames, type}: {fileNames: string[], type: string}) =
   }
 };
 
-export default UploadPreview;
\ No newline at end of file
+export default UploadPreview;
diff --git a/ui/src/index.css b/ui/src/index.css
index 95f2c4b..2db60f2 100644
--- a/ui/src/index.css
+++ b/ui/src/index.css
@@ -103,4 +103,4 @@
 
 .list-columns {
   columns: 4;
-}
\ No newline at end of file
+}

From a7e5e517e940866ee973b7ccf5895c2152934b63 Mon Sep 17 00:00:00 2001
From: Wallys Ferreira <wallysfsilva@gmail.com>
Date: Sat, 27 Jan 2024 09:12:36 -0300
Subject: [PATCH 8/9] fix: prevent file name overflow in card

Co-authored-by: Kevin Nielsen <keveran@gmail.com>
---
 ui/src/components/upload-preview.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/components/upload-preview.tsx b/ui/src/components/upload-preview.tsx
index b6a6de5..31f82e5 100644
--- a/ui/src/components/upload-preview.tsx
+++ b/ui/src/components/upload-preview.tsx
@@ -16,7 +16,7 @@ const UploadPreview = ({fileNames, type}: {fileNames: string[], type: string}) =
         {fileNames.map(fileName => (
           <div className="border rounded-lg w-64 min-h-[264px] max-w-[256px] flex flex-col overflow-hidden justify-center items-center">
             {type == "docs" ? <FileText size="128" /> : <FileImage size="128" />}
-            {fileName}
+    <p className="w-full px-2 truncate text-center">{fileName}</p>
           </div>
         ))}
       </section>

From 87182b327dd71f58a4b492be0b0498bb14da0e14 Mon Sep 17 00:00:00 2001
From: Wallys Ferreira <wallysfsilva@gmail.com>
Date: Sat, 27 Jan 2024 12:16:39 +0000
Subject: [PATCH 9/9] chore: fix indentation

---
 ui/src/components/upload-preview.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/components/upload-preview.tsx b/ui/src/components/upload-preview.tsx
index 31f82e5..3b87690 100644
--- a/ui/src/components/upload-preview.tsx
+++ b/ui/src/components/upload-preview.tsx
@@ -16,7 +16,7 @@ const UploadPreview = ({fileNames, type}: {fileNames: string[], type: string}) =
         {fileNames.map(fileName => (
           <div className="border rounded-lg w-64 min-h-[264px] max-w-[256px] flex flex-col overflow-hidden justify-center items-center">
             {type == "docs" ? <FileText size="128" /> : <FileImage size="128" />}
-    <p className="w-full px-2 truncate text-center">{fileName}</p>
+            <p className="w-full px-2 truncate text-center">{fileName}</p>
           </div>
         ))}
       </section>