feat(studio): drag-drop assetfile/folder and asset import anywhere in the studio

[miguel-heygen]

Summary

• Add /api/projects/:id/upload endpoint for multipart file uploads with automatic dedup naming
• Wire onImportFiles from Assets tab "Import media" button through to the upload API
• Add global drag-drop overlay — drop media files anywhere in the studio, not just the Assets panel
• Files that already exist get (2), (3) suffixes instead of overwriting
• Support uploading into subdirectories via ?dir= param — dropping on a folder imports there
• Make folders draggable in the file tree + support drop-to-root
• Add bodyLimit middleware for early rejection of oversized payloads
• Surface skipped/failed uploads via toast notification instead of console-only

Addresses feedback: "Wish I could upload/drag-drop assets directly in the Studio (music, images, video) like a CapCut media panel"

Test plan

• Open studio, drag an image/video/audio file onto any part of the UI
• Verify the drop overlay appears with "Drop files to import" message
• Drop the file — verify it appears in the Assets tab and file tree
• Drop a file with the same name — verify it gets a (2) suffix
• Click "Import media" button in Assets tab — verify file picker works
• Import multiple files at once via drag-drop
• Drop a file onto a nested folder in the file tree — verify it lands in that folder
• Drag a folder in the file tree and drop it on another folder or root — verify it moves
• Drop a file >500MB — verify toast notification appears
• Verify drag overlay doesn't get stuck when dragging over nested UI elements

[miguel-heygen]

• feat(studio): drag-drop assetfile/folder and asset import anywhere in the studio #155 👈 (View in Graphite)
• feat(studio): full IDE-like file management #147 : 1 other dependent PR (#148 )
• refactor(studio): code quality — 22 findings, dead code removal, App.tsx split #144
• feat(studio): timeline hidden by default with toggle in header + player #142
• feat(studio): redesign left panel — Code tab, Renders header, Lint bottom #141
• feat(studio): remove home page, auto-select project #145
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[jrusso1020]

Nice feature — clean scope, good security hygiene with isSafePath and filename sanitization. A few things to address:

Must fix:

• ensureDir(finalPath) is called with a file path — this will create a directory named after the file and then writeFileSync will throw EISDIR. Likely breaks uploads at runtime.

Should fix:

• Drag overlay gets stuck due to fragile onDragLeave guard — use a drag enter counter instead.
• No user-visible feedback for skipped/failed uploads (only console.warn).

Worth considering:

• No body size limit before formData() parses the entire payload into memory.
• Dedup loop silently falls through at n=10000.
• Files always land in project root regardless of current directory context.

[jrusso1020]

All original feedback addressed thoroughly — nice work.

• ensureDir bug → removed, subdirectory support added via ?dir= param ✓
• Drag overlay → counter pattern ✓
• Dedup loop → skips at boundary ✓
• Body size limit → bodyLimit middleware ✓
• User feedback → toast notifications ✓
• Root-only uploads → folder-aware drops ✓

Two non-blocking nits left (possible missing join import, toast timer cleanup). LGTM.

[jrusso1020]

Nit: join is used here but I don't see it added to the node:path import in the diff. Can you verify it's imported? TypeScript should catch this at build time, but worth double-checking.

[jrusso1020]

Very minor: setTimeout without cleanup — if the component unmounts before the 4s fires, React will warn about setting state on an unmounted component. Not a real issue for the studio shell (it stays mounted), but if you want to be tidy:

const toastTimerRef = useRef<ReturnType<typeof setTimeout>>();

const showUploadToast = useCallback((msg: string) => {
  clearTimeout(toastTimerRef.current);
  setUploadToast(msg);
  toastTimerRef.current = setTimeout(() => setUploadToast(null), 4000);
}, []);

This also gives you the bonus of resetting the timer if a second toast fires before the first clears. Non-blocking.