feat: file upload

Author: PreciousOritsedere

app/components/FileManager.tsx

@@ -48,6 +48,7 @@ export default function FileManager() {
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const [showNewFolderDialog, setShowNewFolderDialog] = useState(false);
   const [fileUploadTrigger, setFileUploadTrigger] = useState(0);
+  const [folderUploadTrigger, setFolderUploadTrigger] = useState(0);
   const [showRenameDialog, setShowRenameDialog] = useState(false);
   const [fileToRename, setFileToRename] = useState<FileItemData | null>(null);
   const [showPreviewModal, setShowPreviewModal] = useState(false);
@@ -532,6 +533,7 @@ export default function FileManager() {
             currentContainerUrl={containerUrlToBrowse}
             onNewFolderClick={() => setShowNewFolderDialog(true)}
             onFileUploadClick={() => setFileUploadTrigger((prev) => prev + 1)}
+            onFolderUploadClick={() => setFolderUploadTrigger((prev) => prev + 1)}
           />
           <main className="flex flex-1 flex-col overflow-hidden">
             <div className="flex-shrink-0">
@@ -622,6 +624,7 @@ export default function FileManager() {
           currentContainerUrl={containerUrlToBrowse}
           onUploadComplete={handleFileUploaded}
           triggerUpload={fileUploadTrigger}
+          triggerFolderUpload={folderUploadTrigger}
         />
       </div>
     </AuthWrapper>

app/components/FileUploadHandler.tsx

@@ -1,29 +1,38 @@
 "use client";
 
 import { useRef, useEffect } from "react";
-import { overwriteFile, UrlString } from "@inrupt/solid-client";
+import { overwriteFile, createContainerAt, UrlString } from "@inrupt/solid-client";
 import toast from "react-hot-toast";
-import { getAuthenticatedSession } from "../lib/helpers";
+import { getAuthenticatedSession, sanitizeResourceName, ensureTrailingSlash } from "../lib/helpers";
 
 interface FileUploadHandlerProps {
   currentContainerUrl: string | null;
   onUploadComplete?: () => void;
   triggerUpload?: number;
+  triggerFolderUpload?: number;
 }
 
 export default function FileUploadHandler({
   currentContainerUrl,
   onUploadComplete,
   triggerUpload,
+  triggerFolderUpload,
 }: FileUploadHandlerProps) {
   const fileInputRef = useRef<HTMLInputElement>(null);
+  const folderInputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
     if (triggerUpload && triggerUpload > 0 && fileInputRef.current) {
       fileInputRef.current.click();
     }
   }, [triggerUpload]);
 
+  useEffect(() => {
+    if (triggerFolderUpload && triggerFolderUpload > 0 && folderInputRef.current) {
+      folderInputRef.current.click();
+    }
+  }, [triggerFolderUpload]);
+
   const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
     const files = e.target.files;
     if (!files || files.length === 0) return;
@@ -103,14 +112,150 @@ export default function FileUploadHandler({
     }
   };
 
+  const handleFolderChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    if (!files || files.length === 0) return;
+
+    if (!currentContainerUrl) {
+      toast.error("Please select a storage first");
+      e.target.value = "";
+      return;
+    }
+
+    let fetchFn: typeof fetch;
+    try {
+      ({ fetch: fetchFn } = getAuthenticatedSession());
+    } catch (error) {
+      toast.error("Not authenticated");
+      e.target.value = "";
+      return;
+    }
+
+    const uploadPromises: Promise<void>[] = [];
+    const uploadedFiles: string[] = [];
+    const failedFiles: string[] = [];
+    const createdFolders = new Set<string>();
+
+    // Process files maintaining folder structure
+    for (let i = 0; i < files.length; i++) {
+      const file = files[i];
+      
+      const relativePath = (file as any).webkitRelativePath || file.name;
+      const pathParts = relativePath.split("/").filter(Boolean);
+      
+      if (pathParts.length === 0) continue;
+
+      // The first part is the folder name, rest is the path inside
+      const folderName = sanitizeResourceName(pathParts[0]);
+      const filePath = pathParts.slice(1); // Path inside the folder
+
+      // Create the base folder container if it doesn't exist
+      const baseFolderUrl = ensureTrailingSlash(
+        currentContainerUrl.endsWith("/")
+          ? `${currentContainerUrl}${encodeURIComponent(folderName)}`
+          : `${currentContainerUrl}/${encodeURIComponent(folderName)}`
+      );
+
+      if (!createdFolders.has(baseFolderUrl)) {
+        try {
+          await createContainerAt(baseFolderUrl as UrlString, { fetch: fetchFn });
+          createdFolders.add(baseFolderUrl);
+        } catch (error) {
+          console.error(`Failed to create folder ${folderName}:`, error);
+        }
+      }
+
+      // Build the full path for this file
+      let currentPath = baseFolderUrl;
+      
+      // Create intermediate folders if needed
+      for (let j = 0; j < filePath.length - 1; j++) {
+        const folderPart = sanitizeResourceName(filePath[j]);
+        const encodedFolderPart = encodeURIComponent(folderPart);
+        currentPath = ensureTrailingSlash(`${currentPath}${encodedFolderPart}`);
+        
+        if (!createdFolders.has(currentPath)) {
+          try {
+            await createContainerAt(currentPath as UrlString, { fetch: fetchFn });
+            createdFolders.add(currentPath);
+          } catch (error) {
+            console.error(`Failed to create subfolder ${folderPart}:`, error);
+          }
+        }
+      }
+
+      // Upload the file
+      const fileName = sanitizeResourceName(filePath[filePath.length - 1]);
+      const fileUrl = `${currentPath}${encodeURIComponent(fileName)}`;
+
+      const uploadPromise = overwriteFile(
+        fileUrl as UrlString,
+        file,
+        {
+          contentType: file.type || "application/octet-stream",
+          fetch: fetchFn,
+        }
+      )
+        .then(() => {
+          uploadedFiles.push(relativePath);
+        })
+        .catch((error) => {
+          console.error(`Failed to upload ${relativePath}:`, error);
+          failedFiles.push(relativePath);
+        });
+
+      uploadPromises.push(uploadPromise);
+    }
+
+    try {
+      await Promise.all(uploadPromises);
+
+      if (uploadedFiles.length > 0) {
+        const message =
+          uploadedFiles.length === 1
+            ? `File uploaded successfully`
+            : `${uploadedFiles.length} files uploaded successfully`;
+        toast.success(message);
+      }
+
+      if (failedFiles.length > 0) {
+        const message =
+          failedFiles.length === 1
+            ? `Failed to upload "${failedFiles[0]}"`
+            : `Failed to upload ${failedFiles.length} files`;
+        toast.error(message);
+      }
+
+      if (uploadedFiles.length > 0 && onUploadComplete) {
+        await new Promise((resolve) => setTimeout(resolve, 200));
+        onUploadComplete();
+      }
+    } catch (error) {
+      console.error("Upload error:", error);
+      toast.error("Failed to upload folder");
+    } finally {
+      e.target.value = "";
+    }
+  };
+
   return (
-    <input
-      ref={fileInputRef}
-      type="file"
-      multiple
-      className="hidden"
-      onChange={handleFileChange}
-    />
+    <>
+      <input
+        ref={fileInputRef}
+        type="file"
+        multiple
+        className="hidden"
+        onChange={handleFileChange}
+      />
+      <input
+        ref={folderInputRef}
+        type="file"
+        {...({ webkitdirectory: "" } as any)}
+        multiple
+        className="hidden"
+        onChange={handleFolderChange}
+      />
+    </>
   );
 }
 

app/components/NewMenuButton.tsx

@@ -9,12 +9,14 @@ interface NewMenuButtonProps {
   currentContainerUrl: string | null;
   onNewFolderClick?: () => void;
   onFileUploadClick?: () => void;
+  onFolderUploadClick?: () => void;
 }
 
 export default function NewMenuButton({
   currentContainerUrl,
   onNewFolderClick,
   onFileUploadClick,
+  onFolderUploadClick,
 }: NewMenuButtonProps) {
   const [showNewMenu, setShowNewMenu] = useState(false);
   const newMenuRef = useRef<HTMLDivElement>(null);
@@ -40,6 +42,13 @@ export default function NewMenuButton({
     }
   };
 
+  const handleFolderUpload = () => {
+    setShowNewMenu(false);
+    if (onFolderUploadClick) {
+      onFolderUploadClick();
+    }
+  };
+
   return (
     <div className="relative mb-4 px-2">
       <Button
@@ -77,12 +86,21 @@ export default function NewMenuButton({
           <button
             type="button"
             onClick={handleFileUpload}
-            className="w-full flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-100 transition-colors cursor-pointer"
+            className="w-full flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-100 transition-colors border-b border-gray-100 cursor-pointer"
             role="menuitem"
           >
             <ArrowUpTrayIcon className="h-5 w-5 text-gray-500" />
             <span>File Upload</span>
           </button>
+          <button
+            type="button"
+            onClick={handleFolderUpload}
+            className="w-full flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-100 transition-colors cursor-pointer"
+            role="menuitem"
+          >
+            <FolderPlusIcon className="h-5 w-5 text-gray-500" />
+            <span>Folder Upload</span>
+          </button>
         </div>
       )}
     </div>