feat: upload files directly into folders (#10637)

## 📝 Summary

File uploads in the files sidebar always targeted an inferred location,
which made it difficult to place files directly into an existing folder
and gave little feedback about the chosen destination.

This change makes the workspace root or a selected folder an explicit
upload destination. Drag-and-drop now highlights the target folder,
toolbar and context-menu uploads respect folder selection, and only the
affected destination is refreshed. Upload batches wait for every request
and report partial failures accurately, while preserving safe relative
directory structure for folder drops.

### Visual evidence


https://github.com/user-attachments/assets/c787f823-9a40-490c-997c-21626f8ca74c

## 📋 Pre-Review Checklist

- [ ] For large changes, or changes that affect the public API: this
change was discussed or approved through an issue, on
[Discord](https://marimo.io/discord?ref=pr), or the community
[discussions](https://github.com/marimo-team/marimo/discussions) (Please
provide a link if applicable).
- [ ] Any AI generated code has been reviewed line-by-line by the human
PR author, who stands by it.
- [x] Video or media evidence is provided for any visual changes
(optional).

## ✅ Merge Checklist

- [x] I have read the [contributor
guidelines](https://github.com/marimo-team/marimo/blob/main/CONTRIBUTING.md).
- [x] Documentation has been updated where applicable, including
docstrings for API changes.
- [x] Tests have been added for the changes made.

> Written by GPT-5 on Codex

Author: Light2Dark

frontend/src/components/editor/chrome/panels/file-explorer-panel.tsx

@@ -2,16 +2,25 @@
 
 import { useAtom, useAtomValue } from "jotai";
 import { FileIcon, HardDrive } from "lucide-react";
-import React, { useCallback, useMemo } from "react";
+import React, { useCallback, useMemo, useState } from "react";
+import type { DropEvent } from "react-dropzone";
 import useResizeObserver from "use-resize-observer";
 import { StorageInspector } from "@/components/storage/storage-inspector";
 import { Accordion } from "@/components/ui/accordion";
 import { storageNamespacesAtom } from "@/core/storage/state";
 import { useDetectedDataSources } from "@/hooks/useDataSourceDiscovery";
 import { cn } from "@/utils/cn";
+import type { FilePath } from "@/utils/paths";
 import { TreeDndProvider } from "../../file-tree/dnd-wrapper";
-import { FileExplorer } from "../../file-tree/file-explorer";
-import { useFileExplorerUpload } from "../../file-tree/upload";
+import {
+  FileExplorer,
+  getUploadDestinationLabel,
+} from "../../file-tree/file-explorer";
+import { treeAtom } from "../../file-tree/state";
+import {
+  getUploadDestinationFromTarget,
+  useFileExplorerUpload,
+} from "../../file-tree/upload";
 import {
   DiscoveredSourcesBadge,
   PanelAccordionContent,
@@ -25,10 +34,37 @@ import {
 } from "./panel-accordion-state";
 
 const FileExplorerComponent: React.FC<{ height: number }> = ({ height }) => {
+  const tree = useAtomValue(treeAtom);
+  const [dropDestinationPath, setDropDestinationPath] =
+    useState<FilePath | null>(null);
+
+  const getDropDestinationPath = useCallback(
+    (event: DropEvent) =>
+      getUploadDestinationForEvent(event, tree.getRootPath()),
+    [tree],
+  );
+  const refreshUploadDestination = useCallback(
+    (destinationPath: FilePath) => tree.refreshPath(destinationPath),
+    [tree],
+  );
   const { getRootProps, getInputProps, isDragActive } = useFileExplorerUpload({
     noClick: true,
     noKeyboard: true,
+    destinationPath: getDropDestinationPath,
+    getDestinationLabel: (path) => getUploadDestinationLabel(tree, path),
+    refreshDestination: refreshUploadDestination,
+    onDragEnter: (event) =>
+      setDropDestinationPath(getDropDestinationPath(event)),
+    onDragOver: (event) =>
+      setDropDestinationPath(getDropDestinationPath(event)),
+    onDragLeave: () => setDropDestinationPath(null),
+    onUploadStart: () => setDropDestinationPath(null),
   });
+  const displayedDestinationPath = dropDestinationPath ?? tree.getRootPath();
+  const displayedDestinationLabel = getUploadDestinationLabel(
+    tree,
+    displayedDestinationPath,
+  );
 
   return (
     <TreeDndProvider>
@@ -39,17 +75,34 @@ const FileExplorerComponent: React.FC<{ height: number }> = ({ height }) => {
       >
         <input {...getInputProps()} />
         {isDragActive && (
-          <div className="absolute inset-0 flex items-center uppercase justify-center text-xl font-bold text-primary/90 bg-accent/85 z-10 border-2 border-dashed border-primary/90 rounded-lg pointer-events-none">
-            Drop files here
+          <div className="absolute inset-0 flex items-start justify-center pt-3 bg-accent/20 z-10 border-2 border-dashed border-primary/90 rounded-lg pointer-events-none">
+            <span className="px-3 py-1.5 rounded-md bg-background/95 border shadow-sm text-sm font-semibold text-primary">
+              Drop files into {displayedDestinationLabel}
+            </span>
           </div>
         )}
 
-        <FileExplorer height={height} />
+        <FileExplorer
+          height={height}
+          externalDropDestinationPath={
+            isDragActive ? displayedDestinationPath : null
+          }
+        />
       </div>
     </TreeDndProvider>
   );
 };
 
+export function getUploadDestinationForEvent(
+  event: DropEvent,
+  rootPath: FilePath,
+): FilePath {
+  if (Array.isArray(event)) {
+    return rootPath;
+  }
+  return getUploadDestinationFromTarget(event.target, rootPath);
+}
+
 // Height of each accordion trigger (px-3 py-2 text-xs = ~33px)
 const TRIGGER_HEIGHT = 33;
 

frontend/src/components/editor/file-tree/__tests__/file-explorer-interactions.test.tsx

@@ -0,0 +1,128 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { Provider, createStore } from "jotai";
+import type React from "react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { MockRequestClient } from "@/__mocks__/requests";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { requestClientAtom } from "@/core/network/requests";
+import type { FileInfo } from "@/core/network/types";
+import { FileExplorer } from "../file-explorer";
+
+vi.mock("react-arborist", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("react-arborist")>();
+  return {
+    ...actual,
+    Tree: ({
+      data,
+      onSelect,
+    }: {
+      data: FileInfo[];
+      onSelect: (nodes: Array<{ data: FileInfo }>) => void;
+    }) => (
+      <div>
+        {data.map((item) => (
+          <button
+            type="button"
+            key={item.id}
+            onClick={() => onSelect([{ data: item }])}
+          >
+            {item.name}
+          </button>
+        ))}
+      </div>
+    ),
+  };
+});
+
+let testStore = createStore();
+
+const wrapper = ({ children }: { children: React.ReactNode }) => (
+  <Provider store={testStore}>
+    <TooltipProvider>{children}</TooltipProvider>
+  </Provider>
+);
+
+describe("FileExplorer upload destination", () => {
+  let client: ReturnType<typeof MockRequestClient.create>;
+
+  beforeEach(() => {
+    localStorage.removeItem("marimo:showHiddenFiles");
+    testStore = createStore();
+    client = MockRequestClient.create({
+      sendListFiles: vi.fn().mockImplementation(async ({ path }) => {
+        if (path) {
+          return { files: [] };
+        }
+        return {
+          root: "/workspace",
+          files: [
+            {
+              id: "data-directory",
+              name: "data",
+              path: "/workspace/data",
+              isDirectory: true,
+            },
+            {
+              id: "hidden-directory",
+              name: ".hidden",
+              path: "/workspace/.hidden",
+              isDirectory: true,
+            },
+          ],
+        };
+      }),
+      sendCreateFileOrFolder: vi.fn().mockResolvedValue({ success: true }),
+    });
+    testStore.set(requestClientAtom, client);
+  });
+
+  it("uses the selected folder for toolbar uploads", async () => {
+    render(<FileExplorer height={300} />, { wrapper });
+
+    const rootUpload = await screen.findByRole("button", {
+      name: "Upload files to workspace root",
+    });
+    expect(rootUpload).toBeVisible();
+
+    fireEvent.click(await screen.findByText("data"));
+
+    const folderUpload = await screen.findByRole("button", {
+      name: "Upload files to data",
+    });
+    fireEvent.click(folderUpload);
+
+    const file = new File(["contents"], "report.csv");
+    fireEvent.change(screen.getByTestId("file-explorer-upload-input"), {
+      target: { files: [file] },
+    });
+
+    await waitFor(() => {
+      expect(client.sendCreateFileOrFolder).toHaveBeenCalledWith({
+        path: "/workspace/data",
+        type: "file",
+        name: "report.csv",
+        file,
+      });
+    });
+  });
+
+  it("clears a selected hidden folder when hidden files are hidden", async () => {
+    render(<FileExplorer height={300} />, { wrapper });
+
+    fireEvent.click(await screen.findByText(".hidden"));
+    expect(
+      await screen.findByRole("button", { name: "Upload files to .hidden" }),
+    ).toBeVisible();
+
+    fireEvent.click(screen.getByTestId("file-explorer-hidden-files-button"));
+
+    expect(
+      await screen.findByRole("button", {
+        name: "Upload files to workspace root",
+      }),
+    ).toBeVisible();
+    expect(screen.queryByText(".hidden")).not.toBeInTheDocument();
+  });
+});

frontend/src/components/editor/file-tree/__tests__/requesting-tree.test.ts

@@ -52,6 +52,7 @@ describe("RequestingTree", () => {
 
   test("initialize should load files and set rootPath", async () => {
     expect(sendListFiles).toHaveBeenCalledWith({ path: "" });
+    expect(requestingTree.getRootPath()).toBe("/root");
     expect(mockOnChange).toHaveBeenCalledWith([
       { id: "1.1", name: "file1", path: "/root/file1" },
       { id: "1.2", name: "folder1", isDirectory: true, path: "/root/folder1" },
@@ -261,6 +262,65 @@ describe("RequestingTree", () => {
     `);
   });
 
+  test("refreshPath should refresh an uploaded file's destination", async () => {
+    sendListFiles.mockImplementation(async ({ path }: { path: string }) => {
+      if (path === "/root/folder1") {
+        return {
+          files: [
+            {
+              id: "uploaded",
+              name: "uploaded.csv",
+              path: "/root/folder1/uploaded.csv",
+            },
+          ],
+        };
+      }
+      return {
+        files: [
+          { id: "1.1", name: "file1", path: "/root/file1" },
+          {
+            id: "1.2",
+            name: "folder1",
+            isDirectory: true,
+            path: "/root/folder1",
+          },
+          {
+            id: "1.3",
+            name: "folder2",
+            isDirectory: true,
+            path: "/root/folder2",
+          },
+        ],
+      };
+    });
+
+    await requestingTree.refreshPath("/root/folder1" as FilePath);
+
+    expect(sendListFiles).toHaveBeenCalledWith({ path: "/root/folder1" });
+    expect(mockOnChange.mock.calls.at(-1)?.[0]).toEqual([
+      { id: "1.1", name: "file1", path: "/root/file1" },
+      {
+        id: "1.2",
+        name: "folder1",
+        isDirectory: true,
+        path: "/root/folder1",
+        children: [
+          {
+            id: "uploaded",
+            name: "uploaded.csv",
+            path: "/root/folder1/uploaded.csv",
+          },
+        ],
+      },
+      {
+        id: "1.3",
+        name: "folder2",
+        isDirectory: true,
+        path: "/root/folder2",
+      },
+    ]);
+  });
+
   describe("when API fails", () => {
     test("initialize should handle errors gracefully", async () => {
       requestingTree = new RequestingTree({