Possibilité de glisser-déposer un dossier dans Chrome

Eiji Kitamura

À mesure que les applications Web évoluent, vous avez peut-être trouvé pratique de permettre aux utilisateurs de faire glisser des fichiers depuis leur bureau vers le navigateur pour les modifier, les importer, les partager, etc. Malheureusement, nous n'avons pas pu faire glisser des dossiers vers des pages Web. Heureusement, ce problème sera résolu à partir de Chrome 21 (déjà disponible dans la version en développement de Chrome).

Transférer plusieurs fichiers par glisser-déposer

Examinons un exemple de code de glisser-déposer existant.

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

Dans cet exemple, vous pouvez glisser-déposer un ou plusieurs fichiers du bureau vers votre navigateur. Toutefois, lorsque vous essayez de transmettre un dossier, notez qu'il sera soit refusé, soit traité comme un objet File, ce qui entraînera un échec.

Gérer les dossiers déposés

Chrome 21 vous permet de déposer un ou plusieurs dossiers dans la fenêtre du navigateur. Pour les gérer, vous devez modifier la façon dont vous gérez les objets déposés.

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

Notez qu'une grande différence ici est que vous pouvez traiter un objet déposé comme Entry (FileEntry ou DirectoryEntry) à l'aide d'une nouvelle fonction appelée getAsEntry (webkitGetAsEntry). Une fois que vous avez obtenu l'accès à l'objet Entry, vous pouvez utiliser les méthodes de gestion de fichiers standards introduites dans la spécification de l'API FileSystem. Par exemple, cet exemple montre comment détecter si un objet déposé est un fichier ou un répertoire en examinant le champ .isFile (ou .isDirectory).

Pour en savoir plus sur l'API FileSystem, consultez Explorer les API FileSystem. Pour en savoir plus sur la nouvelle fonctionnalité de glisser-déposer, consultez ce document. Bien entendu, ces fonctionnalités sont des normes ouvertes ou sont en attente de le devenir prochainement.