Sleep een map naar Chrome, nu beschikbaar

Eiji Kitamura

Naarmate webapps zich verder ontwikkelen, vond u het misschien handig om gebruikers bestanden van het bureaublad naar de browser te laten slepen om te bewerken, uploaden, delen, enz. Helaas konden we tot nu toe geen mappen naar webpagina's slepen en neerzetten. Gelukkig wordt dit probleem vanaf Chrome 21 opgelost (al beschikbaar in het Chrome dev-kanaal).

Meerdere bestanden doorgeven met slepen en neerzetten

Laten we eens kijken naar een codevoorbeeld van een bestaande drag-and-drop-functie.

<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 daadwerkelijk een bestand of bestanden van het bureaublad naar uw browser slepen, maar wanneer u een map probeert door te geven, ziet u dat deze wordt afgewezen of als een File object wordt behandeld, wat resulteert in een fout.

Hoe om te gaan met verwijderde mappen

Met Chrome 21 kun je een of meerdere mappen in het browservenster neerzetten. Om dit te doen, moet je de manier waarop je met neergezette objecten omgaat, aanpassen.

<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 verwijderd object kunt behandelen als Entry ( FileEntry of DirectoryEntry ) met behulp van de nieuwe functie getAsEntry ( webkitGetAsEntry ). Nadat u toegang hebt verkregen tot het Entry object, kunt u standaard bestandsverwerkingsmethoden gebruiken die zijn geïntroduceerd in de FileSystem API-specificatie. Dit voorbeeld laat bijvoorbeeld zien hoe u kunt detecteren of een verwijderd object een bestand of een directory is door het veld .isFile (of .isDirectory ) te controleren.

Voor meer informatie over de FileSystem API kunt u 'Exploring the FileSystem APIs' lezen en voor nieuwe drag-and-drop-mogelijkheden dit document . Uiteraard zijn deze functies open standaarden of wachten ze erop om dat binnenkort te worden.