file upload on button click

slayernominee · Jan 7, 2024 · 34757a5 · 34757a5
1 parent 3013b67
commit 34757a5
Show file tree

Hide file tree

Showing 5 changed files with 332 additions and 108 deletions.
diff --git a/app/dashboard/files/page.tsx b/app/dashboard/files/page.tsx
@@ -31,31 +31,33 @@ async function deleteFile(path: string) {
         headers: {
             'Authorization': 'Bearer ' + localStorage.getItem('token'),
         },
-        })
+    })
     return res
 }
 
 
+
+
 export default function Home() {
     const [data, setData] = useState<File[]>([])
     const [path, setPath] = useState("&.")
     const [selected, setSelected] = useState<File[]>([])
-
+    
     const refresh = async () => {
         const res = await getData(path)
         setData(res)
     }
-
+    
     useEffect(() => {
         refresh()
     }, [])
-
+    
     const goToHome = async () => {
         setPath("&.")
         const res = await getData("&.")
         setData(res)
     }
-
+    
     const goUpwards = async () => {
         const pathArr = path.split("&")
         pathArr.pop()
@@ -64,14 +66,14 @@ export default function Home() {
         const res = await getData(newPath)
         setData(res)
     }
-
+    
     const handleClick = async (cell: any) => {
-
+        
         // check if the click is on the name column
         if (cell.getContext().column.id != "name") {
             return
         }
-
+        
         if (cell.getContext().row.original.is_dir) {
             // go in the directory
             setPath(path + "&" + cell.getContext().row.original.name)
@@ -81,6 +83,26 @@ export default function Home() {
             // open the file? or download it?
         }
     }
+
+    async function uploadFiles(e: any) {
+        const files = e.target.files
+        const formData = new FormData()
+
+        for (let i = 0; i < files.length; i++) {
+            formData.append('file', files[i])
+        }
+
+        await fetch(process.env.NEXT_PUBLIC_API_URL + '/api/upload/' + path, {
+            method: 'POST',
+            headers: {
+                'Authorization': 'Bearer ' + localStorage.getItem('token'),
+            },
+            body: formData,
+        })
+
+        refresh()
+
+    }
 
     const deleteSelected = async () => {
         const res = await Promise.all(selected.map((file) => deleteFile(path + "&" + file.getValue("name"))))
@@ -89,37 +111,45 @@ export default function Home() {
         setSelected([])
         refresh()
     }
-
+    
     return (
-            <Layout>
-            <h1>Files</h1>
-
-            <div className="flex mb-2">
-            <div className="flex">
-                <Button variant="ghost" disabled={path == '&.'} onClick={goToHome}><Icon path={mdiHomeOutline} size={1} /></Button>
-
-                <div className="rounded-md px-4 border py-2 font-mono text-sm w-64">
-                { path.replace("&.", ".").replaceAll("&", "/") }
-                </div>
-
-                <Button variant="ghost" disabled={path == '&.'} onClick={goUpwards}><Icon path={mdiChevronUp} size={1} /></Button>
-                <Button variant="ghost" onClick={refresh}><Icon path={mdiReload} size={1} /></Button>
-            </div>
-
-            <div className="w-full">
-                <div className="text-right">
-                <Button variant="ghost" disabled={selected.length == 0}><Icon path={mdiCloudDownloadOutline} size={1} /></Button>
-                <Button variant="ghost"><Icon path={mdiCloudUploadOutline} size={1} /></Button>
-                <Button variant="ghost" disabled={selected.length != 1}><Icon path={mdiPencilOutline} size={1} /></Button>
-                <Button variant="ghost" disabled={selected.length == 0}><Icon path={mdiFolderMoveOutline} size={1} /></Button>
-                <Button variant="ghost" disabled={selected.length == 0}><Icon path={mdiContentCopy} size={1} /></Button>
-                <Button variant="ghost" disabled={selected.length == 0} onClick={deleteSelected}><Icon path={mdiDeleteOutline} size={1} /></Button>
-                </div>
-            </div>
-            </div>
-
-            <DataTable getSelected={setSelected} cellClick={handleClick} columns={columns} data={data} />
-
-            </Layout>
+        <Layout>
+        <h1>Files</h1>
+
+        <div className="flex mb-2">
+        <div className="flex">
+        <Button variant="ghost" disabled={path == '&.'} onClick={goToHome}><Icon path={mdiHomeOutline} size={1} /></Button>
+
+        <div className="rounded-md px-4 border py-2 font-mono text-sm w-64">
+        { path.replace("&.", ".").replaceAll("&", "/") }
+        </div>
+
+        <Button variant="ghost" disabled={path == '&.'} onClick={goUpwards}><Icon path={mdiChevronUp} size={1} /></Button>
+        <Button variant="ghost" onClick={refresh}><Icon path={mdiReload} size={1} /></Button>
+        </div>
+
+        <div className="w-full">
+        <div className="text-right">
+        <Button variant="ghost" disabled={selected.length == 0}><Icon path={mdiCloudDownloadOutline} size={1} /></Button>
+
+        <Button variant="ghost" className="cursor-default">
+            <label htmlFor="fileUpload" className="cursor-pointer">
+            <Icon path={mdiCloudUploadOutline} size={1} />
+            </label>
+        </Button>
+        <input className="hidden" id="fileUpload" type="file" multiple onChange={uploadFiles} />
+
+        <Button variant="ghost" disabled={selected.length != 1}><Icon path={mdiPencilOutline} size={1} /></Button>
+        <Button variant="ghost" disabled={selected.length == 0}><Icon path={mdiFolderMoveOutline} size={1} /></Button>
+        <Button variant="ghost" disabled={selected.length == 0}><Icon path={mdiContentCopy} size={1} /></Button>
+        <Button variant="ghost" disabled={selected.length == 0} onClick={deleteSelected}><Icon path={mdiDeleteOutline} size={1} /></Button>
+        </div>
+        </div>
+        </div>
+
+
+        <DataTable getSelected={setSelected} cellClick={handleClick} columns={columns} data={data} />
+
+        </Layout>
         )
     }