Add drag-and-drop file upload to workspace tree#548
Draft
Conversation
hoyla
added
workspaces
uploader
feature
Users can now drag files and folders from their file system directly onto folders in the workspace tree to trigger an upload to that location. Changes: - Add dropZoneUtils.ts with shared utilities for handling file drops - Update TreeBrowser to detect and handle file system drops vs internal moves - Update UploadFiles to accept pre-populated files via droppedFiles prop - Wire up Workspaces component to pass dropped files to upload modal Cross-platform compatible using the File System Access API (webkitGetAsEntry) which is supported by all major browsers.
Chrome and Safari may return at most ~100 entries per readEntries() call. The spec requires calling it repeatedly until an empty array is returned. Without this, dropping a Finder folder with >100 files would silently lose everything after the first batch.
hoyla
force-pushed
the
ljh-claude-drag-and-drop-upload
branch
from
617ca67 to
965ac4f
Compare
- Tighten file detection: exclude drags containing application/json to prevent internal tree drags being misidentified as file drops - Add .catch() to readFilesFromDragEvent in TreeBrowser to handle errors (permissions, broken symlinks) instead of swallowing them - Fix collapsed folder drop target: search workspace tree recursively instead of only expandedNodes, so drops onto collapsed folders go to the correct folder rather than silently falling back to root - Remove unused readingDroppedFiles state from TreeBrowser - Remove unused dragEventContainsInternalData export from dropZoneUtils
hoyla
force-pushed
the
ljh-claude-drag-and-drop-upload
branch
from
965ac4f to
efea5a0
Compare
…d selections Collect all FileSystemEntry references synchronously from the DataTransfer before any async work. The browser invalidates the DataTransfer after the synchronous event handler returns, so awaiting inside the iteration loop caused items beyond the first to be silently lost. Also removes redundant double-call to webkitGetAsEntry() per item.
hoyla
changed the title
Contributor
Author
|
This does actually seem to work locally. When I'm back I might ask how to deploy to playground so others can try it. |
Reject mixed selections (folders + files, or multiple folders) which caused duplicate entries due to how the OS includes both a folder and its visible children as separate DataTransfer items. Now only two shapes are accepted: 1. A single directory (full hierarchy preserved) 2. One or more files with no directories Show an alert to the user when an unsupported selection is dropped.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Addresses #314
Users can now drag files and folders from their file system directly onto any folder in the workspace tree (or the empty area below it) to trigger an upload to that location. The upload modal opens pre-populated with the dropped files and targeted at the correct workspace folder.
What this does
dropZoneUtils.ts) —readFilesFromDragEventreads files and recursively reads directories from theDataTransfer, anddragEventContainsFilesdistinguishes file-system drops from internal tree item drags.onDropFilesprop, falling through to the existing internal-move logic otherwise.droppedFilesstate, which flows through WorkspaceSummary to UploadFiles.droppedFilesvia auseEffect, pre-populating the upload modal and opening it automatically.readDragEventwas replaced with the sharedreadFilesFromDragEvent.Key implementation details
FileSystemEntryreferences are captured synchronously before any async work. Browsers invalidate theDataTransferafter the synchronous event handler returns, so awaiting inside thedataTransfer.itemsloop would silently lose all items beyond the first. The fix collects all entry handles up front, then processes them asynchronously.readEntries()batching — Chrome/Safari cap directory reads at ~100 entries per call.readDirectoryEntrynow loops until an empty batch is returned, ensuring large directories are fully read.webkitGetAsEntry()fall back togetAsFile().Tested locally with