Skip to content

Add drag-and-drop file upload support for projects and snippets#329

Merged
tracygardner merged 3 commits intomainfrom
claude/flock-file-drag-drop-srSz2
Feb 27, 2026
Merged

Add drag-and-drop file upload support for projects and snippets#329
tracygardner merged 3 commits intomainfrom
claude/flock-file-drag-drop-srSz2

Conversation

@tracygardner
Copy link
Contributor

Summary

This PR adds comprehensive drag-and-drop functionality to the application, allowing users to drop .flock, .json, .fsnip, and .png files directly onto the page to load projects or import snippets.

Key Changes

  • New setupDragAndDrop() function in files.js: Implements drag-and-drop event handling with visual feedback via an overlay that appears when files are dragged over the page
  • New processProjectFileDrop() helper: Handles validation and loading of .flock and .json project files with file size checks (5MB limit) and content validation
  • New processSnippetFileDrop() helper: Handles loading of .fsnip snippet files and .png image imports
  • Visual feedback: Added a styled overlay (#drag-drop-overlay) that displays when files are dragged over the page, with purple background and dashed border
  • Localization: Added three new translation strings for drag-and-drop hints and error messages
  • Integration: Wired up setupDragAndDrop() in main.js to initialize on app load

Notable Implementation Details

  • Drag counter prevents overlay from disappearing prematurely when dragging over child elements
  • File validation includes extension checking, size limits (5MB for projects, 4MB for content), and JSON structure validation
  • Project names are automatically extracted from filenames with sanitization (alphanumeric, underscore, period, hyphen only)
  • Only the first dropped file is processed to avoid confusion
  • Proper error handling with user-friendly alert messages for various failure scenarios

https://claude.ai/code/session_01A2Kxxs4YycXxYWz5EFY6MZ

Users can now drag .flock/.json project files or .fsnip/.png snippet
files from the desktop directly onto the app to open or import them.
A translucent purple overlay with a hint message appears while
dragging to confirm the drop target is active.

https://claude.ai/code/session_01A2Kxxs4YycXxYWz5EFY6MZ
Add `// ai` to the end of every translated value line in de, fr, it, pl, pt,
and sv locale files to distinguish them from the manually human-translated es
locale (which already uses `// human`).

https://claude.ai/code/session_01A2Kxxs4YycXxYWz5EFY6MZ
Adds `drag_drop_hint` and `drop_unsupported_file_alert` (from the drag-and-drop
feature) to de, fr, it, pl, pt, and sv with AI translations.

Also adds `rotate_camera`, `rotate_camera_tooltip`, `up`, and `up_tooltip` to
es.js, which were missing from the Spanish locale. All new es.js entries are
marked `// ai` to flag them for human review.

Reverts the accidental blanket `// ai` tagging of existing entries in the six
non-Spanish locale files.

https://claude.ai/code/session_01A2Kxxs4YycXxYWz5EFY6MZ
@tracygardner tracygardner merged commit 018cbe5 into main Feb 27, 2026
5 checks passed
@tracygardner tracygardner deleted the claude/flock-file-drag-drop-srSz2 branch February 27, 2026 20:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants