enhancement
(User-visible)
major
#23469
File upload via drag&drop directly from the client's file system
As a user, I want to be able to efficiently upload files from my file system to the system, depending on the context. This should be implemented so that, for an object in edit mode, I can select data from a folder on my client’s file system and drag and drop it onto the object’s dialog area.
For example:
- For galleries: Images should be able to be dragged and dropped directly onto the gallery field in the dialog without any additional dialogs. The upload process should start automatically.
- WebFolder: Drag-and-drop files onto the component itself. The upload process should start automatically.
Implementation
Files and folders can now be dropped onto WebFolders, GalleryFields, and FolderFields to upload them. The drop zone is highlighted in color as soon as the user hovers over it with a file in hand.\\ 
The FileDropHandler interface, with a default implementation in FolderFileDropHandler, is now available for handling dropped files and folders in WebFolders or FolderFields. There, uploaded files are processed, and in the case of a folder upload, the corresponding folder structure is recreated and the files are placed within it. \\ No FileDropHandler is required for file drops onto GalleryFields. Images can be dropped onto GalleryFields just as they can onto WebFolders and FolderFields. If a folder is dropped, all images it contains (including those in subfolders) are uploaded to the gallery. Duplicate filenames trigger an error message and are not uploaded. \\ The processing and upload of file drops on the client side is handled in DragAndDropFile.js. \\
#!div style="font-size: 80%"
Drop zone in HTML:
{{{#!xml
<div class="dropControl">
<div id="[controlID]-dropArea">
<h1 id="[controlID]-dropText">
</div>
<div id="[controlID]-dropFrame"></div>
</div>
}}}
#!div style="font-size: 80%"
`FileDropHandler`:
{{{#!java
public interface FileDropHandler {
public void uploadFiles(DisplayContext context, FolderNode selectedFolder, List<BinaryData> files);
}
}}}
Code Migration
The constant LayoutConstants.ATTRIBUTE_CONTENTS_ONLY has been changed from String to Property<Boolean>. See: [277524]
Test
The test can be performed using an A object. Under "Type Demo," drop individual files, multiple files, and folder structures onto "gallery" and "webFolder." Verify that uploads are prevented if you are not in editMode. In addition, invalid files (e.g., .txt in "gallery") or duplicate files should be intercepted by the system and not uploaded.