Ordner per Drag-and-drop in Chrome ziehen

Eiji Kitamura

Mit der Weiterentwicklung von Web-Apps haben Sie vielleicht festgestellt, dass es praktisch ist, wenn Nutzer Dateien per Drag-and-drop vom Computer in den Browser ziehen können, um sie zu bearbeiten, hochzuladen, freizugeben usw. Leider war es bisher nicht möglich, Ordner per Drag-and-drop auf Webseiten zu ziehen. Glücklicherweise wird dieses Problem ab Chrome 21 behoben (bereits in der Chrome-Entwicklerversion verfügbar).

Mehrere Dateien per Drag-and-drop übergeben

Sehen wir uns ein Codebeispiel für 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 Dateien per Drag-and-drop vom Desktop in den Browser ziehen. Wenn Sie jedoch versuchen, einen Ordner zu übergeben, wird er entweder abgelehnt oder als File-Objekt behandelt, was zu einem Fehler führt.

Umgang mit abgelegten Ordnern

In Chrome 21 können Sie einen oder mehrere Ordner in das Browserfenster ziehen. Um damit umzugehen, müssen Sie die Art und Weise ändern, wie Sie abgelegte Objekte behandeln.

<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 mithilfe der neuen Funktion getAsEntry (webkitGetAsEntry) als Entry (FileEntry oder DirectoryEntry) behandeln können. Nachdem Sie Zugriff auf das Entry-Objekt erhalten haben, können Sie die Standardmethoden zur Dateiverwaltung verwenden, die in der FileSystem API-Spezifikation eingeführt wurden. In diesem Beispiel wird beispielsweise 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 Exploring the FileSystem APIs (Die FileSystem APIs kennenlernen). Informationen zur neuen Drag-and-drop-Funktion finden Sie in diesem Dokument. Natürlich sind diese Funktionen offene Standards oder werden es bald.