Trascina una cartella in Chrome ora disponibile

Eiji Kitamura

Twitter GitHub Glitch Mastodon

Con l'evolversi delle app web, potresti aver trovato utile consentire agli utenti di trascinare i file dal desktop al browser per modificarli, caricarli, condividerli e così via. Purtroppo, non siamo riusciti a trascinare le cartelle nelle pagine web. Fortunatamente, a partire da Chrome 21, questo problema verrà risolto (già disponibile nel canale Dev di Chrome).

Passaggio di più file tramite trascinamento

Diamo un'occhiata a un esempio di codice del trascinamento esistente.

<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 questo esempio, puoi trascinare uno o più file dal desktop al browser, ma quando provi a passare una cartella, nota che verrà rifiutata o considerata come un oggetto File, causando un errore.

Come gestire le cartelle eliminate

Chrome 21 ti consente di trascinare una o più cartelle nella finestra del browser. Per gestirli, devi modificare il modo in cui gestisci gli oggetti caduti.

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

Tieni presente che una grande differenza qui è che puoi trattare un oggetto rilasciato come Entry (FileEntry o DirectoryEntry) utilizzando la nuova funzione chiamata getAsEntry (webkitGetAsEntry). Dopo aver ottenuto l'accesso all'oggetto Entry, puoi utilizzare i metodi standard di gestione dei file che sono stati introdotti nella specifica dell'API FileSystem. Ad esempio, questo esempio mostra come rilevare se un oggetto eliminato è un file o una directory esaminando il campo .isFile (o il campo .isDirectory).

Per ulteriori informazioni sull'API FileSystem, consulta la sezione Esplorazione delle API FileSystem per informazioni sulla nuova funzionalità di trascinamento, leggi questo documento. Naturalmente, queste funzionalità sono standard aperti o sono in attesa di diventarne presto.