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

Eiji Kitamura

Twitter GitHub Glitch Mastodon

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

Transmettre 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, vous remarquerez qu'il sera soit refusé, soit traité comme un objet File, ce qui entraînera un échec.

Gérer les dossiers supprimé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 supprimé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 est que vous pouvez traiter un objet supprimé comme Entry (FileEntry ou DirectoryEntry) à l'aide d'une nouvelle fonction appelée getAsEntry (webkitGetAsEntry). Une fois l'accès à l'objet Entry obtenu, vous pouvez utiliser les méthodes standards de gestion de fichiers introduites dans la spécification de l'API FileSystem. Cet exemple montre comment détecter si un objet supprimé est un fichier ou un répertoire en examinant le champ .isFile (ou .isDirectory).

Pour plus d'informations sur l'API FileSystem, consultez le document Explore the FileSystem APIs (Découvrir les API FileSystem) pour en savoir plus sur la nouvelle fonctionnalité de glisser-déposer. Pour en savoir plus, consultez ce document. Bien sûr, ces fonctionnalités sont des normes ouvertes ou attendent bientôt.