Verbesserung
Top-Thema
Wichtig
Kleinigkeit
Wichtig
Wichtig
#23469
Fileupload mittels Drag&Drop direkt vom Filesystem des Clients
Als Anwender will ich in der Lage sein, je nach Kontext Dateien effizient von meinem Filesystem in das System hochladen. Dies soll so umgesetzt werden, dass ich einem, im Bearbeitungsmodus befindlichen, Objekt, Daten aus einem Ordner auf dem FileSystems meines Clients markiere und per Drag&Drop auf den Dialogbereich des Objektes schieben und loslassen kann.
Beispielsweise:
- für Galerien: Hierbei sollen Bilder mittels Drag&Drop direkt auf das Galeriefeld des Dialoges gezogen werden können, ohne weitere Dialoge. Der Hochladevorgang soll automatisch starten.
- WebFolder: Drag&Drop von Dateien auf die Komponente selbst. Der Hochladevorgang soll automatisch starten.
Umsetzung
Dateien und Ordner können jetzt auf WebFolder, GalleryFields und FolderFields gedroppt werden, um diese hochzuladen. Die Dropzone wird farbliche markiert, sobald der Nutzer mit einer Datei in der Hand darüber hovert.\\
Für den Umgang mit gedroppten Dateien und Ordnern in WebFoldern oder FolderFields existiert jetzt das Interface FileDropHandler mit einer Default-Implementierung in FolderFileDropHandler. Dort werden hochgeladene Dateien verarbeitet und im Falle eines Ordneruploads die enstprechende Ordnerstruktur nachgebildet und die Dateien darin abgelegt. \\ Für Filedrops auf GalleryFields wird kein FileDropHandler benötigt. Bilder können ebenso wie bei WebFoldern und FolderFields auf dem GalleryFields gedroppt werden. Wird ein Ordner gedroppt, so werden alle darin enthaltenen Bilder (auch aus Unterordnern) in die Galerie geladen. Doppelte Namen verursachen eine Fehlermeldung und werden nicht hochgeladen. \\ Die Verarbeitung und der Upload von Filedrops auf Clientseite wird in DragAndDropFile.js behandelt. \\
#!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
Die Konstante LayoutConstants.ATTRIBUTE_CONTENTS_ONLY wurde von String nach Property<Boolean> geändert. Siehe: [277524]
Test
Der Test kann mithilfe eines A-Objekts durchgeführt werden. Unter Typendemo auf "gallery" und "webFolder" einzelne Dateien, mehrere Dateien und Ordnerstrukturen droppen. Dabei überprüfen, dass Uploads verhindert werden, falls man sich nicht im editMode befindet. Außerdem sollen ungültige Dateien (z.B. .txt in gallery) oder doppelte Dateien vom System abgefangen und nicht hochgeladen werden.