Trascina una cartella in Chrome ora disponibile

Eiji Kitamura

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

Trasmissione di più file con il trascinamento

Vediamo 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 un file o più file dal desktop al browser, ma quando provi a passare una cartella, tieni presente che verrà rifiutata o trattata come un oggetto File, con conseguente errore.

Come gestire le cartelle eliminate

Chrome 21 ti consente di rilasciare una o più cartelle nella finestra del browser. Per gestire questi problemi, devi modificare il modo in cui gestisci gli oggetti trascinati.

<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 è che puoi trattare un oggetto rilasciato come Entry (FileEntry o DirectoryEntry) utilizzando una nuova funzione chiamata getAsEntry (webkitGetAsEntry). Dopo aver ottenuto l'accesso all'oggetto Entry, puoi utilizzare i metodi di gestione dei file standard introdotti nella specifica dell'API FileSystem. Ad esempio, questo esempio mostra come rilevare se un oggetto inserito è un file o una directory esaminando il campo .isFile (o .isDirectory).

Per ulteriori informazioni sull'API FileSystem, leggi Esplorazione delle API FileSystem. Per informazioni sulla nuova funzionalità di trascinamento, leggi questo documento. Ovviamente, queste funzionalità sono standard aperti o sono in attesa di diventarlo a breve.