Actions

apps/dashboard/src/app/[locale]/@dashboard/(root)/vault/[[...folders]]/page.tsx

@@ -1,7 +1,7 @@
 import { Breadcrumbs } from "@/components/breadcrumbs";
 import { Table } from "@/components/tables/vault";
-import { Button } from "@midday/ui/button";
-import { Icons } from "@midday/ui/icons";
+import { CreateFolderButton } from "@/components/tables/vault/create-folder-button";
+import { UploadButton } from "@/components/tables/vault/upload-button";
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
@@ -19,17 +19,8 @@ export default function Vault({ params }) {
         <Breadcrumbs folders={params?.folders} />
 
         <div className="flex space-x-2">
-          <Button variant="outline" disabled={disableActions}>
-            Upload
-          </Button>
-          <Button
-            variant="outline"
-            className="w-[32px] h-[32px]"
-            size="icon"
-            disabled={disableActions}
-          >
-            <Icons.CreateNewFolder />
-          </Button>
+          <CreateFolderButton />
+          <UploadButton disableActions={disableActions} />
         </div>
       </div>
       <Table path={params?.folders?.join("/")} />

apps/dashboard/src/components/tables/vault/create-folder-button.tsx

@@ -0,0 +1,15 @@
+import { Button } from "@midday/ui/button";
+import { Icons } from "@midday/ui/icons";
+
+export function CreateFolderButton({ disableActions }) {
+  return (
+    <Button
+      variant="outline"
+      className="w-[32px] h-[32px]"
+      size="icon"
+      disabled={disableActions}
+    >
+      <Icons.CreateNewFolder />
+    </Button>
+  );
+}

apps/dashboard/src/components/tables/vault/upload-button.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import { Button } from "@midday/ui/button";
+
+export function UploadButton({ disableActions }) {
+  return (
+    <Button
+      variant="outline"
+      disabled={disableActions}
+      onClick={() => document.getElementById("upload-files")?.click()}
+    >
+      Upload
+    </Button>
+  );
+}

apps/dashboard/src/components/tables/vault/upload-zone.tsx

@@ -78,7 +78,7 @@ export function UploadZone({ children }) {
                 isDragActive && "visible"
               )}
             >
-              <input {...getInputProps()} />
+              <input {...getInputProps()} id="upload-files" />
 
               <p className="text-xs">
                 Drop your files here, to