Ordner per Drag-and-drop in Chrome ziehen

Eiji Kitamura
Eiji Kitamura

Wenn sich Web-Apps weiterentwickeln, war es für Sie möglicherweise praktisch, wenn Nutzer Dateien per Drag-and-drop vom Desktop in den Browser ziehen, um sie zu bearbeiten, hochzuladen, freizugeben usw. Leider war es nicht möglich, Ordner auf Webseiten zu ziehen. Zum Glück wird dieses Problem ab Chrome 21 behoben, das bereits in der Chrome-Entwicklerversion verfügbar ist.

Mehrere Dateien per Drag-and-drop übergeben

Sehen wir uns ein Codebeispiel für vorhandenes Drag-and-drop an.

<div id="dropzone"></div>
var dropzone = document.getElementById('dropzone');
dropzone.ondrop = function(e) {
    var length = e.dataTransfer.files.length;
    for (var i = 0; i < length; i++) {
    var file = e.dataTransfer.files[i];
    ... // do whatever you want
    }
};

In diesem Beispiel können Sie eine oder mehrere Dateien per Drag-and-drop vom Desktop in Ihren Browser ziehen. Wenn Sie jedoch versuchen, einen Ordner zu übergeben, werden Sie feststellen, dass er entweder abgelehnt oder als File-Objekt behandelt wird. Dies führt zu einem Fehler.

Umgang mit verworfenen Ordnern

In Chrome 21 können Sie einen oder mehrere Ordner in das Browserfenster ziehen. Um diese zu verarbeiten, müssen Sie die Verarbeitungsweise der abgelegten Objekte ändern.

<div id="dropzone"></div>
var dropzone = document.getElementById('dropzone');
dropzone.ondrop = function(e) {
    var length = e.dataTransfer.items.length;
    for (var i = 0; i < length; i++) {
    var entry = e.dataTransfer.items[i].webkitGetAsEntry();
    if (entry.isFile) {
        ... // do whatever you want
    } else if (entry.isDirectory) {
        ... // do whatever you want
    }
    }
};

Ein großer Unterschied besteht darin, dass Sie ein abgelegtes Objekt als Entry (FileEntry oder DirectoryEntry) behandeln können, indem Sie die neue Funktion getAsEntry (webkitGetAsEntry) verwenden. Nachdem Sie Zugriff auf das Entry-Objekt erhalten haben, können Sie die Standardmethoden zur Dateiverarbeitung verwenden, die in der FileSystem API-Spezifikation eingeführt wurden. In diesem Beispiel wird gezeigt, wie Sie anhand des Felds .isFile (oder .isDirectory) erkennen können, ob ein abgelegtes Objekt eine Datei oder ein Verzeichnis ist.

Weitere Informationen zur FileSystem API finden Sie unter FileSystem APIs kennenlernen und in diesem Dokument. Dort erfahren Sie auch, welche neuen Drag-and-drop-Funktionen verfügbar sind. Natürlich handelt es sich bei diesen Funktionen um offene Standards oder darum, dass sie bald in Zukunft eingeführt werden.