Sleep een map naar Chrome, nu beschikbaar

Eiji Kitamura

Naarmate web-apps evolueren, heeft u het misschien handig gevonden om gebruikers bestanden van het bureaublad naar de browser te laten slepen en neerzetten om ze te bewerken, uploaden, delen, enz. Maar helaas zijn we er niet in geslaagd mappen naar webpagina's te slepen en neer te zetten. Gelukkig zal dit probleem vanaf Chrome 21 worden aangepakt (al beschikbaar in het Chrome-ontwikkelaarskanaal).

Meerdere bestanden doorgeven met slepen en neerzetten

Laten we eens kijken naar een codevoorbeeld van bestaand slepen en neerzetten.

<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 dit voorbeeld kunt u een bestand of bestanden van het bureaublad naar uw browser slepen en neerzetten, maar als u een map probeert door te geven, zult u merken dat deze wordt afgewezen of behandeld als een File object, wat tot een fout leidt.

Hoe om te gaan met verwijderde mappen

Met Chrome 21 kunt u een map of meerdere mappen in het browservenster plaatsen. Om hiermee om te gaan, moet u de manier veranderen waarop u met gevallen voorwerpen omgaat.

<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
    }
    }
};

Merk op dat een groot verschil hier is dat u een neergezet object als Entry ( FileEntry of DirectoryEntry ) kunt behandelen door de nieuwe functie getAsEntry ( webkitGetAsEntry ) te gebruiken. Nadat u toegang tot het Entry object heeft verkregen, kunt u standaardmethoden voor bestandsverwerking gebruiken die zijn geïntroduceerd in de FileSystem API-specificatie. Dit voorbeeld laat bijvoorbeeld zien hoe u kunt detecteren of een neergezet object een bestand of een map is door het veld .isFile (of het veld .isDirectory ) te onderzoeken.

Voor meer informatie over de FileSystem API leest u Exploring the FileSystem APIs , over nieuwe mogelijkheden voor slepen en neerzetten leest u dit document . Deze functies zijn uiteraard open standaarden of wachten erop om er binnenkort een te worden.