cms icon indicating copy to clipboard operation
cms copied to clipboard

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

Open daun opened this issue 1 year ago • 0 comments

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.

daun avatar Aug 07 '24 10:08 daun