Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[5.x] Drag and drop folders into the asset browser #10583

Merged
merged 16 commits into from
Oct 25, 2024

Conversation

daun
Copy link
Contributor

@daun daun commented Aug 7, 2024

Allow dropping a whole folder into the asset browser.

Screen Recording 2024-08-07 at 11 52 19

Closes statamic/ideas#1168

Current behavior

Currently, dropping a folder results in a cryptic error because the files array of the data transfer object is empty.

Behavior after this change

Dropping a folder will upload any files within it and recreate the folder structure in the asset container.

Required changes

  • Uploader.vue: check for dropped folders, recursively find files in folders, send along original relative path
  • AssetUploader.php: create sanitizer for folder names: explode by /, sanitize like filename, then implode again
  • AssetsController.php: sanitize and append upload subfolder to current path

Sanitization

The relative folder names of dropped files are sanitized, i.e. lowercased and slugified. The original path currently being browsed is not sanitized, as it already exists and might have been created on the filesystem sidestepping any control panel sanitization.

In containers that don't allow creating folders, dropping a folder will flatten the folder structure into a simple list of files.

Browser support

The Directory Entries API basically works everywhere. Tested in Chrome, Firefox, and Safari. While the API is prefixed with webkit, Firefox re-used the prefix for its implementation.

@jasonvarga
Copy link
Member

Awesome. 🎉

@jasonvarga jasonvarga merged commit 4d08876 into statamic:5.x Oct 25, 2024
16 checks passed
@daun daun deleted the feature/upload-asset-folders branch October 25, 2024 17:56
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.

Drag Folder Into Asset Container Uploads All Assets & Creates Directory Structure (Like Google Drive)
2 participants