[5.x] Drag and drop folders into the asset browser #10583
Merged
+124
−7
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.
Allow dropping a whole folder into the asset browser.
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 pathAssetUploader.php
: create sanitizer for folder names: explode by/
, sanitize like filename, then implode againAssetsController.php
: sanitize and append upload subfolder to current pathSanitization
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.