Add sidebar upload progress toast and optional finish title

frontend/src/components/editor/file-tree/upload.tsx

@@ -4,6 +4,7 @@ import { type DropzoneOptions, useDropzone } from "react-dropzone";
 import { toast } from "@/components/ui/use-toast";
 import { useRequestClient } from "@/core/network/requests";
 import { serializeBlob } from "@/utils/blob";
+import { withLoadingToast } from "@/utils/download";
 import { Logger } from "@/utils/Logger";
 import { type FilePath, PathBuilder } from "@/utils/paths";
 import { refreshRoot } from "./state";
@@ -40,30 +41,49 @@ export function useFileExplorerUpload(options: DropzoneOptions = {}) {
       });
     },
     onDrop: async (acceptedFiles) => {
-      for (const file of acceptedFiles) {
-        // We strip the leading slash since File.path can return
-        // `/path/to/file`.
-        const filePath = stripLeadingSlash(getPath(file));
-        let directoryPath = "" as FilePath;
-        if (filePath) {
-          directoryPath =
-            PathBuilder.guessDeliminator(filePath).dirname(filePath);
-        }
-
-        // File contents are sent base64-encoded to support arbitrary
-        // bytes data
-        //
-        // get the raw base64-encoded data from a string starting with
-        // data:*/*;base64,
-        const base64 = (await serializeBlob(file)).split(",")[1];
-        await sendCreateFileOrFolder({
-          path: directoryPath,
-          type: "file",
-          name: file.name,
-          contents: base64,
-        });
+      if (acceptedFiles.length === 0) {
+        return;
       }
-      await refreshRoot();
+      const isSingle = acceptedFiles.length === 1;
+      const loadingTitle = isSingle
+        ? "Uploading file..."
+        : "Uploading files...";
+      const finishTitle = isSingle
+        ? "File uploaded"
+        : `${acceptedFiles.length} files uploaded`;
+
+      await withLoadingToast(
+        loadingTitle,
+        async (progress) => {
+          progress.addTotal(acceptedFiles.length);
+          for (const file of acceptedFiles) {
+            // We strip the leading slash since File.path can return
+            // `/path/to/file`.
+            const filePath = stripLeadingSlash(getPath(file));
+            let directoryPath = "" as FilePath;
+            if (filePath) {
+              directoryPath =
+                PathBuilder.guessDeliminator(filePath).dirname(filePath);
+            }
+
+            // File contents are sent base64-encoded to support arbitrary
+            // bytes data
+            //
+            // get the raw base64-encoded data from a string starting with
+            // data:*/*;base64,
+            const base64 = (await serializeBlob(file)).split(",")[1];
+            await sendCreateFileOrFolder({
+              path: directoryPath,
+              type: "file",
+              name: file.name,
+              contents: base64,
+            });
+            progress.increment(1);
+          }
+          await refreshRoot();
+        },
+        finishTitle,
+      );
     },
     ...options,
   });

frontend/src/utils/__tests__/download.test.tsx

@@ -113,6 +113,36 @@ describe("withLoadingToast", () => {
     );
   });
 
+  it("should show a finish toast when finishTitle is provided", async () => {
+    await withLoadingToast(
+      "Uploading files...",
+      async () => "done",
+      "Upload complete",
+    );
+
+    expect(toast).toHaveBeenCalledTimes(2);
+    expect(toast).toHaveBeenNthCalledWith(
+      2,
+      expect.objectContaining({
+        title: "Upload complete",
+      }),
+    );
+  });
+
+  it("should not show a finish toast when the operation fails", async () => {
+    await expect(
+      withLoadingToast(
+        "Uploading files...",
+        async () => {
+          throw new Error("Upload failed");
+        },
+        "Upload complete",
+      ),
+    ).rejects.toThrow("Upload failed");
+
+    expect(toast).toHaveBeenCalledTimes(1);
+  });
+
   it("should wait for the async function to complete", async () => {
     const events: string[] = [];
 

frontend/src/utils/download.ts

@@ -20,6 +20,7 @@ import { ToastProgress } from "./toast-progress";
 export async function withLoadingToast<T>(
   title: string,
   fn: (progress: ProgressState) => Promise<T>,
+  finishTitle?: string,
 ): Promise<T> {
   const progress = ProgressState.indeterminate();
   const loadingToast = toast({
@@ -30,6 +31,9 @@ export async function withLoadingToast<T>(
   try {
     const result = await fn(progress);
     loadingToast.dismiss();
+    if (finishTitle) {
+      toast({ title: finishTitle });
+    }
     return result;
   } catch (error) {
     loadingToast.dismiss();