@marimo-team/frontend 0.24.1-dev44 → 0.24.1-dev46

package/src/components/editor/file-tree/file-explorer.tsx

@@ -47,7 +47,7 @@ import { MarimoIcon, MarimoPlusIcon } from "@/components/icons/marimo-icons";
 import { Spinner } from "@/components/icons/spinner";
 import { useImperativeModal } from "@/components/modal/ImperativeModal";
 import { AlertDialogDestructiveAction } from "@/components/ui/alert-dialog";
-import { Button, buttonVariants } from "@/components/ui/button";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenuItem,
   DropdownMenuSeparator,
@@ -74,7 +74,10 @@ import { FileViewer } from "./file-viewer";
 import type { RequestingTree } from "./requesting-tree";
 import { openStateAtom, treeAtom } from "./state";
 import { PYTHON_CODE_FOR_FILE_TYPE } from "./types";
-import { useFileExplorerUpload } from "./upload";
+import {
+  FILE_EXPLORER_DIRECTORY_PATH_ATTRIBUTE,
+  useFileExplorerUpload,
+} from "./upload";
 
 const hiddenFilesState = atomWithStorage(
   "marimo:showHiddenFiles",
@@ -85,23 +88,53 @@ const hiddenFilesState = atomWithStorage(
   },
 );
 
-const RequestingTreeContext = React.createContext<RequestingTree | null>(null);
+interface FileExplorerContextValue {
+  tree: RequestingTree;
+  uploadFiles: (destinationPath: FilePath) => void;
+  externalDropDestinationPath: FilePath | null;
+}
+
+const RequestingTreeContext =
+  React.createContext<FileExplorerContextValue | null>(null);
 
 export const FileExplorer: React.FC<{
   height: number;
-}> = ({ height }) => {
+  externalDropDestinationPath?: FilePath | null;
+}> = ({ height, externalDropDestinationPath = null }) => {
   const treeRef = useRef<TreeApi<FileInfo>>(null);
   const dndManager = useTreeDndManager();
   const [tree] = useAtom(treeAtom);
   const [data, setData] = useState<FileInfo[]>([]);
   const [openFile, setOpenFile] = useState<FileInfo | null>(null);
+  const [selectedFolderPath, setSelectedFolderPath] = useState<FilePath | null>(
+    null,
+  );
   const [showHiddenFiles, setShowHiddenFiles] =
     useAtom<boolean>(hiddenFilesState);
+  // Keep external state to remember which folders are open when this
+  // component is unmounted.
+  const [openState, setOpenState] = useAtom(openStateAtom);
+
+  const refreshUploadDestination = useEvent((destinationPath: FilePath) => {
+    return tree.refreshPath(destinationPath);
+  });
+
+  const uploadDestinationRef = useRef<FilePath>("" as FilePath);
+  const { getInputProps: getUploadInputProps, open: openUploadPicker } =
+    useFileExplorerUpload({
+      noClick: true,
+      noDrag: true,
+      noKeyboard: true,
+      destinationPath: () => uploadDestinationRef.current,
+      getDestinationLabel: (path) => getUploadDestinationLabel(tree, path),
+      refreshDestination: refreshUploadDestination,
+    });
+  const handleUploadFiles = useEvent((destinationPath: FilePath) => {
+    uploadDestinationRef.current = destinationPath;
+    openUploadPicker();
+  });
 
   const { openPrompt } = useImperativeModal();
-  // Keep external state to remember which folders are open
-  // when this component is unmounted
-  const [openState, setOpenState] = useAtom(openStateAtom);
   const { isPending, error } = useAsyncData(() => tree.initialize(setData), []);
 
   const handleRefresh = useEvent(() => {
@@ -152,6 +185,22 @@ export const FileExplorer: React.FC<{
     () => filterHiddenTree(data, showHiddenFiles),
     [data, showHiddenFiles],
   );
+  React.useEffect(() => {
+    if (
+      selectedFolderPath &&
+      !treeContainsPath(visibleData, selectedFolderPath)
+    ) {
+      setSelectedFolderPath(null);
+    }
+  }, [selectedFolderPath, visibleData]);
+  const contextValue = React.useMemo<FileExplorerContextValue>(
+    () => ({
+      tree,
+      uploadFiles: handleUploadFiles,
+      externalDropDestinationPath,
+    }),
+    [tree, handleUploadFiles, externalDropDestinationPath],
+  );
 
   if (isPending) {
     return <Spinner size="medium" centered={true} />;
@@ -193,6 +242,10 @@ export const FileExplorer: React.FC<{
 
   return (
     <>
+      <input
+        data-testid="file-explorer-upload-input"
+        {...getUploadInputProps()}
+      />
       <Toolbar
         onRefresh={handleRefresh}
         onHidden={handleHiddenFilesToggle}
@@ -201,9 +254,14 @@ export const FileExplorer: React.FC<{
         onCreateNotebook={handleCreateNotebook}
         onCreateFolder={handleCreateFolder}
         onCollapseAll={handleCollapseAll}
-        tree={tree}
+        uploadDestinationPath={selectedFolderPath ?? tree.getRootPath()}
+        uploadDestinationLabel={getUploadDestinationLabel(
+          tree,
+          selectedFolderPath ?? tree.getRootPath(),
+        )}
+        onUpload={handleUploadFiles}
       />
-      <RequestingTreeContext value={tree}>
+      <RequestingTreeContext value={contextValue}>
         <Tree<FileInfo>
           width="100%"
           ref={treeRef}
@@ -232,11 +290,15 @@ export const FileExplorer: React.FC<{
           onSelect={(nodes) => {
             const first = nodes[0];
             if (!first) {
+              setSelectedFolderPath(null);
               return;
             }
-            if (!first.data.isDirectory) {
-              setOpenFile(first.data);
+            if (first.data.isDirectory) {
+              setSelectedFolderPath(first.data.path as FilePath);
+              return;
             }
+            setSelectedFolderPath(null);
+            setOpenFile(first.data);
           }}
           onToggle={async (id) => {
             const result = await tree.expand(id);
@@ -269,7 +331,9 @@ interface ToolbarProps {
   onCreateNotebook: () => void;
   onCreateFolder: () => void;
   onCollapseAll: () => void;
-  tree: RequestingTree;
+  uploadDestinationPath: FilePath;
+  uploadDestinationLabel: string;
+  onUpload: (destinationPath: FilePath) => void;
 }
 
 const Toolbar = ({
@@ -280,11 +344,11 @@ const Toolbar = ({
   onCreateNotebook,
   onCreateFolder,
   onCollapseAll,
+  uploadDestinationPath,
+  uploadDestinationLabel,
+  onUpload,
 }: ToolbarProps) => {
-  const { getRootProps, getInputProps } = useFileExplorerUpload({
-    noDrag: true,
-    noDragEventsBubbling: true,
-  });
+  const uploadLabel = `Upload files to ${uploadDestinationLabel}`;
 
   return (
     <div className="flex items-center justify-end px-2 shrink-0 border-b">
@@ -318,19 +382,17 @@ const Toolbar = ({
           <FolderPlusIcon size={16} />
         </Button>
       </Tooltip>
-      <Tooltip content="Upload file">
-        <button
+      <Tooltip content={uploadLabel}>
+        <Button
           data-testid="file-explorer-upload-button"
-          {...getRootProps({})}
-          className={buttonVariants({
-            variant: "text",
-            size: "xs",
-          })}
+          aria-label={uploadLabel}
+          onClick={() => onUpload(uploadDestinationPath)}
+          variant="text"
+          size="xs"
         >
           <UploadIcon size={16} />
-        </button>
+        </Button>
       </Tooltip>
-      <input {...getInputProps({})} type="file" />
       <RefreshIconButton
         data-testid="file-explorer-refresh-button"
         onClick={onRefresh}
@@ -411,7 +473,11 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
     });
   };
 
-  const tree = use(RequestingTreeContext);
+  const fileExplorer = use(RequestingTreeContext);
+  const tree = fileExplorer?.tree;
+  const isExternalDropTarget =
+    node.data.isDirectory &&
+    fileExplorer?.externalDropDestinationPath === node.data.path;
 
   const handleOpenMarimoFile = async (
     evt: Pick<Event, "stopPropagation" | "preventDefault">,
@@ -483,6 +549,9 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
     <div
       style={style}
       ref={dragHandle}
+      {...(node.data.isDirectory
+        ? { [FILE_EXPLORER_DIRECTORY_PATH_ATTRIBUTE]: node.data.path }
+        : {})}
       className={cn(
         "flex items-center cursor-pointer ml-1 text-muted-foreground whitespace-nowrap group",
       )}
@@ -490,6 +559,7 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
       onClick={(evt) => {
         evt.stopPropagation();
         if (node.data.isDirectory) {
+          node.select();
           node.toggle();
         }
       }}
@@ -501,6 +571,10 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
           node.willReceiveDrop &&
             node.data.isDirectory &&
             "bg-accent/80 hover:bg-accent/80 text-accent-foreground",
+          node.isSelected &&
+            "bg-accent/60 hover:bg-accent/60 text-accent-foreground",
+          isExternalDropTarget &&
+            "bg-primary/15 hover:bg-primary/15 text-accent-foreground ring-1 ring-inset ring-primary",
         )}
       >
         {node.data.isMarimoFile ? (
@@ -563,6 +637,15 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
                 <FolderPlusIcon className={MENU_ITEM_ICON_CLASS} />
                 Create folder
               </DropdownMenuItem>
+              <DropdownMenuItem
+                onSelect={() =>
+                  fileExplorer?.uploadFiles(node.data.path as FilePath)
+                }
+                data-testid="file-explorer-upload-files-menu-item"
+              >
+                <UploadIcon className={MENU_ITEM_ICON_CLASS} />
+                Upload files here
+              </DropdownMenuItem>
               <DropdownMenuSeparator />
             </>
           )}
@@ -680,6 +763,16 @@ function openMarimoNotebook(
   openNotebook(path);
 }
 
+export function getUploadDestinationLabel(
+  tree: RequestingTree,
+  destinationPath: FilePath,
+): string {
+  if (destinationPath === tree.getRootPath()) {
+    return "workspace root";
+  }
+  return tree.relativeFromRoot(destinationPath);
+}
+
 export function filterHiddenTree(
   list: FileInfo[],
   showHidden: boolean,
@@ -711,3 +804,11 @@ export function isDirectoryOrFileHidden(filename: string): boolean {
   }
   return false;
 }
+
+function treeContainsPath(list: FileInfo[], path: FilePath): boolean {
+  return list.some(
+    (item) =>
+      item.path === path ||
+      (item.children ? treeContainsPath(item.children, path) : false),
+  );
+}

package/src/components/editor/file-tree/requesting-tree.tsx

@@ -286,6 +286,24 @@ export class RequestingTree {
     this.onChange(this.delegate.data);
   };
 
+  refreshPath = async (path: FilePath): Promise<void> => {
+    const data = await this.callbacks.listFiles({ path }).catch(() => null);
+    if (!data) {
+      return;
+    }
+
+    if (path === this.rootPath) {
+      this.delegate = new SimpleTree(data.files);
+    } else {
+      const item = findFileByPath(this.delegate.data, path);
+      if (!item?.isDirectory) {
+        return;
+      }
+      this.delegate.update({ id: item.id, changes: { children: data.files } });
+    }
+    this.onChange(this.delegate.data);
+  };
+
   public relativeFromRoot = (path: FilePath): FilePath => {
     // Add a trailing delimiter to the root path if it doesn't have one
     const root = this.rootPath.endsWith(this.path.deliminator)
@@ -297,4 +315,23 @@ export class RequestingTree {
     }
     return path;
   };
+
+  public getRootPath = (): FilePath => {
+    return this.rootPath;
+  };
+}
+
+function findFileByPath(list: FileInfo[], path: string): FileInfo | undefined {
+  for (const item of list) {
+    if (item.path === path) {
+      return item;
+    }
+    const child = item.children
+      ? findFileByPath(item.children, path)
+      : undefined;
+    if (child) {
+      return child;
+    }
+  }
+  return undefined;
 }

package/src/components/editor/file-tree/state.tsx

@@ -2,7 +2,6 @@
 
 import { atom } from "jotai";
 import { requestClientAtom } from "@/core/network/requests";
-import { store } from "@/core/state/jotai";
 import { invariant } from "@/utils/invariant";
 import { RequestingTree } from "./requesting-tree";
 
@@ -21,7 +20,3 @@ export const treeAtom = atom<RequestingTree>((get) => {
 });
 
 export const openStateAtom = atom<Record<string, boolean>>({});
-
-export async function refreshRoot() {
-  await store.get(treeAtom).refreshAll([]);
-}

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

@@ -1,22 +1,61 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { type DropzoneOptions, useDropzone } from "react-dropzone";
+import {
+  type DropEvent,
+  type DropzoneOptions,
+  useDropzone,
+} from "react-dropzone";
 import { toast } from "@/components/ui/use-toast";
 import { useRequestClient } from "@/core/network/requests";
+import type { FileCreateInput, FileCreateResponse } from "@/core/network/types";
 import { withLoadingToast } from "@/utils/download";
+import { prettyError } from "@/utils/errors";
 import { Logger } from "@/utils/Logger";
-import { type FilePath, PathBuilder } from "@/utils/paths";
+import { type FilePath, PathBuilder, Paths } from "@/utils/paths";
 import { mapWithConcurrency } from "@/utils/semaphore";
-import { refreshRoot } from "./state";
 
 const MAX_SIZE = 1024 * 1024 * 100; // 100MB
 const UPLOAD_CONCURRENCY = 5;
 
-export function useFileExplorerUpload(options: DropzoneOptions = {}) {
+export const FILE_EXPLORER_DIRECTORY_PATH_ATTRIBUTE =
+  "data-file-explorer-directory-path";
+
+type DestinationPath = FilePath | ((event: DropEvent) => FilePath);
+
+interface FileExplorerUploadOptions extends Omit<
+  DropzoneOptions,
+  "onDrop" | "onDropRejected" | "onError"
+> {
+  destinationPath: DestinationPath;
+  getDestinationLabel?: (path: FilePath) => string;
+  onUploadStart?: (destinationPath: FilePath, files: File[]) => void;
+  refreshDestination: (destinationPath: FilePath) => Promise<void>;
+}
+
+interface UploadFileResult {
+  file: File;
+  response: FileCreateResponse;
+}
+
+export interface UploadFilesResult {
+  successful: UploadFileResult[];
+  failed: UploadFileResult[];
+}
+
+export function useFileExplorerUpload(options: FileExplorerUploadOptions) {
+  const {
+    destinationPath,
+    getDestinationLabel = (path) => path,
+    onUploadStart,
+    refreshDestination,
+    ...dropzoneOptions
+  } = options;
   const { sendCreateFileOrFolder } = useRequestClient();
+
   return useDropzone({
     multiple: true,
     maxSize: MAX_SIZE,
+    ...dropzoneOptions,
     onError: (error) => {
       Logger.error(error);
       toast({
@@ -41,53 +80,189 @@ export function useFileExplorerUpload(options: DropzoneOptions = {}) {
         variant: "danger",
       });
     },
-    onDrop: async (acceptedFiles) => {
+    onDrop: async (acceptedFiles, _rejectedFiles, event) => {
       if (acceptedFiles.length === 0) {
         return;
       }
-      const isSingle = acceptedFiles.length === 1;
 
+      const resolvedDestinationPath =
+        typeof destinationPath === "function"
+          ? destinationPath(event)
+          : destinationPath;
+      const destinationLabel = getDestinationLabel(resolvedDestinationPath);
+      const isSingle = acceptedFiles.length === 1;
       const loadingTitle = isSingle
-        ? "Uploading file..."
-        : "Uploading files...";
-      const onFinish = {
-        title: isSingle
-          ? "File uploaded"
-          : `${acceptedFiles.length} files uploaded`,
-      };
-
-      await withLoadingToast(
-        loadingTitle,
-        async (progress) => {
+        ? `Uploading file to ${destinationLabel}...`
+        : `Uploading files to ${destinationLabel}...`;
+
+      onUploadStart?.(resolvedDestinationPath, acceptedFiles);
+
+      let result: UploadFilesResult;
+      try {
+        result = await withLoadingToast(loadingTitle, async (progress) => {
           progress.addTotal(acceptedFiles.length);
-          await mapWithConcurrency(
-            acceptedFiles,
-            UPLOAD_CONCURRENCY,
-            async (file) => {
-              // 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);
-              }
-
-              await sendCreateFileOrFolder({
-                path: directoryPath,
-                type: "file",
-                name: file.name,
-                file,
-              });
-              progress.increment(1);
-            },
-          );
-          await refreshRoot();
-        },
-        onFinish,
-      );
+          return uploadFilesToDestination({
+            files: acceptedFiles,
+            destinationPath: resolvedDestinationPath,
+            createFile: sendCreateFileOrFolder,
+            onFileProcessed: () => progress.increment(1),
+          });
+        });
+      } catch {
+        await refreshDestination(resolvedDestinationPath);
+        return;
+      }
+
+      await refreshDestination(resolvedDestinationPath);
+      showUploadResultToast(result, destinationLabel);
+    },
+  });
+}
+
+export async function uploadFilesToDestination({
+  files,
+  destinationPath,
+  createFile,
+  onFileProcessed,
+}: {
+  files: File[];
+  destinationPath: FilePath;
+  createFile: (request: FileCreateInput) => Promise<FileCreateResponse>;
+  onFileProcessed?: () => void;
+}): Promise<UploadFilesResult> {
+  const results = await mapWithConcurrency(
+    files,
+    UPLOAD_CONCURRENCY,
+    async (file): Promise<UploadFileResult> => {
+      try {
+        const filePath = stripLeadingSlash(getPath(file));
+        const directoryPath = resolveUploadDirectoryPath({
+          destinationPath,
+          filePath,
+        });
+        const response = await createFile({
+          path: directoryPath,
+          type: "file",
+          name: file.name,
+          file,
+        });
+        return { file, response };
+      } catch (error) {
+        return {
+          file,
+          response: { success: false, message: prettyError(error) },
+        };
+      } finally {
+        onFileProcessed?.();
+      }
     },
-    ...options,
+  );
+
+  return {
+    successful: results.filter(({ response }) => response.success),
+    failed: results.filter(({ response }) => !response.success),
+  };
+}
+
+export function resolveUploadDirectoryPath({
+  destinationPath,
+  filePath,
+}: {
+  destinationPath: FilePath;
+  filePath: FilePath | undefined;
+}): FilePath {
+  if (!filePath) {
+    return destinationPath;
+  }
+
+  if (Paths.isAbsolute(filePath)) {
+    throw new Error(`Upload path must be relative: ${filePath}`);
+  }
+
+  const pathParts = filePath.split(/[\\/]+/);
+  const relativeDirectoryParts = pathParts.slice(0, -1).filter(Boolean);
+  if (relativeDirectoryParts.includes("..")) {
+    throw new Error(`Upload path cannot contain parent traversal: ${filePath}`);
+  }
+
+  const normalizedDirectoryParts = relativeDirectoryParts.filter(
+    (part) => part !== ".",
+  );
+  if (normalizedDirectoryParts.length === 0) {
+    return destinationPath;
+  }
+
+  const destinationPathBuilder = PathBuilder.guessDeliminator(destinationPath);
+  const normalizedRelativePath = normalizedDirectoryParts.join(
+    destinationPathBuilder.deliminator,
+  );
+  return destinationPathBuilder.join(destinationPath, normalizedRelativePath);
+}
+
+export function getUploadDestinationFromTarget(
+  target: EventTarget | null,
+  rootPath: FilePath,
+): FilePath {
+  if (!(target instanceof Element)) {
+    return rootPath;
+  }
+
+  const directory = target.closest(
+    `[${FILE_EXPLORER_DIRECTORY_PATH_ATTRIBUTE}]`,
+  );
+  const path = directory?.getAttribute(FILE_EXPLORER_DIRECTORY_PATH_ATTRIBUTE);
+  return path ? (path as FilePath) : rootPath;
+}
+
+function showUploadResultToast(
+  result: UploadFilesResult,
+  destinationLabel: string,
+) {
+  const total = result.successful.length + result.failed.length;
+  if (result.failed.length > 0) {
+    let title: string;
+    if (result.successful.length === 0) {
+      title = total === 1 ? "File upload failed" : "Files failed to upload";
+    } else {
+      title = `${result.successful.length} of ${total} files uploaded`;
+    }
+    toast({
+      title,
+      description: (
+        <div className="flex flex-col gap-1">
+          <div>Destination: {destinationLabel}.</div>
+          {result.failed.map(({ file, response }, index) => (
+            <div key={`${file.name}-${index}`}>
+              {file.name}:{" "}
+              {response.message || "The server rejected the upload."}
+            </div>
+          ))}
+        </div>
+      ),
+      variant: "danger",
+    });
+    return;
+  }
+
+  const renamedFiles = result.successful.filter(
+    ({ file, response }) =>
+      response.info?.name && response.info.name !== file.name,
+  );
+  toast({
+    title: total === 1 ? "File uploaded" : `${total} files uploaded`,
+    description:
+      renamedFiles.length === 0 ? (
+        `Uploaded to ${destinationLabel}.`
+      ) : (
+        <div className="flex flex-col gap-1">
+          <div>Uploaded to {destinationLabel}.</div>
+          {renamedFiles.map(({ file, response }, index) => (
+            <div key={`${file.name}-${index}`}>
+              {file.name} was saved as {response.info?.name}.
+            </div>
+          ))}
+        </div>
+      ),
   });
 }