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 is to be implemented in such a way that I can select data from a folder on my client's FileSystem to an object, which is in edit mode, and drag and drop it onto the object's dialog area and release.
For example:
- For galleries: Here, images should be able to be dragged and dropped directly onto the gallery area of the dialog, without any further dialogs. The upload process should start automatically.
- WebFolder: Drag&Drop of files onto the component itself. The upload process should start automatically.
Implementation
Files and folders can now be dropped onto WebFolder, 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.\
For handling dropped files and folders in WebFolders or FolderFields the interface FileDropHandler now exists with a default implementation in FolderFileDropHandler. There uploaded files are processed and in case of a folder upload the corresponding folder structure is reproduced and the files are stored in it. \\ For Filedrops on GalleryFields no FileDropHandler is needed. Images can be dropped on the GalleryFields as well as on WebFolders and FolderFields. If a folder is dropped, all images contained in it (also from subfolders) are loaded into the gallery. Duplicate names will cause an error message and will not be uploaded. \ Processing and uploading of filedrops on client side is handled in DragAndDropFile.js. \\
#!div style="font-size: 80%" Dropezone 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 LayoutConstants.ATTRIBUTE_CONTENTS_ONLY constant has been changed from String to Property<Boolean>. See: [277524]
Test
The test can be performed using an A object. Under type demo on "gallery" and "webFolder" drop single files, multiple files and folder structures. Check that uploads are prevented if you are not in editMode. In addition, invalid files (e.g. .txt in gallery) or duplicate files are to be intercepted by the system and not uploaded.