Merge pull request #20 from solid/feat/my-storages

Feat/my storages

Author: PreciousOritsedere

app/components/FileManager.tsx

@@ -1,29 +1,42 @@
 "use client";
 
 import { useRef, useEffect } from "react";
-import { overwriteFile, UrlString } from "@inrupt/solid-client";
 import toast from "react-hot-toast";
-import { getAuthenticatedSession } from "../lib/helpers";
+import {
+  getAuthenticatedSession,
+  uploadFilesToContainer,
+  uploadFolderFilesToContainer,
+  FolderUploadFile,
+} 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;
@@ -42,38 +55,73 @@ export default function FileUploadHandler({
       e.target.value = "";
       return;
     }
-    const uploadPromises: Promise<void>[] = [];
-    const uploadedFiles: string[] = [];
-    const failedFiles: string[] = [];
-
-    for (let i = 0; i < files.length; i++) {
-      const file = files[i];
-      const sanitizedName = file.name.replace(/[<>:"/\\|?*]/g, "");
-      const fileUrl = currentContainerUrl.endsWith("/")
-        ? `${currentContainerUrl}${sanitizedName}`
-        : `${currentContainerUrl}/${sanitizedName}`;
-
-      const uploadPromise = overwriteFile(
-        fileUrl as UrlString,
-        file,
-        {
-          contentType: file.type || "application/octet-stream",
-          fetch: fetchFn,
-        }
-      )
-        .then(() => {
-          uploadedFiles.push(sanitizedName);
-        })
-        .catch((error) => {
-          console.error(`Failed to upload ${file.name}:`, error);
-          failedFiles.push(sanitizedName);
-        });
-
-      uploadPromises.push(uploadPromise);
+    try {
+      const { uploadedFiles, failedFiles } = await uploadFilesToContainer(
+        Array.from(files),
+        currentContainerUrl,
+        fetchFn
+      );
+
+      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 files");
+    } finally {
+      e.target.value = "";
+    }
+  };
+
+  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 {
-      await Promise.all(uploadPromises);
+      ({ fetch: fetchFn } = getAuthenticatedSession());
+    } catch (error) {
+      toast.error("Not authenticated");
+      e.target.value = "";
+      return;
+    }
+
+    const folderFiles: FolderUploadFile[] = Array.from(files)
+      .map((file) => ({
+        file,
+        relativePath: (file as any).webkitRelativePath || file.name,
+      }))
+      .filter((item) => item.relativePath && item.relativePath.length > 0);
+
+    try {
+      const { uploadedFiles, failedFiles } = await uploadFolderFilesToContainer(
+        folderFiles,
+        currentContainerUrl,
+        fetchFn
+      );
 
       if (uploadedFiles.length > 0) {
         const message =
@@ -97,20 +145,30 @@ export default function FileUploadHandler({
       }
     } catch (error) {
       console.error("Upload error:", error);
-      toast.error("Failed to upload files");
+      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/FileUploadHandler.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>