La maggior parte degli utenti non ne ha idea: per caricare un file su un sito web, non serve mirare al minuscolo pulsante «Scegli file» e navigare nel file manager. Basta un semplice gesto, trascinare il file dall'esplora risorse direttamente su quel pulsante.

Non è un plugin né il risultato di uno script ingegnoso. <input type="file">, un elemento HTML standard, supporta nativamente il drag-and-drop a livello di browser. Niente JavaScript, niente librerie, niente dropzone. Il comportamento è descritto nella specifica HTML e funziona almeno dalla metà degli anni 2010.

Il team del techblog ha testato questo trucco su una dozzina di siti web. Funziona ovunque si usi un <input type="file"> nativo: caricare plugin nell'amministrazione di WordPress, inviare scansioni all'assistenza tecnica, allegare curriculum sui portali HR. Nessun errore, nessuna danza con il file manager.

💡 Panoramica rapida:

• Trascina un file dall'esplora risorse sul pulsante «Scegli file» in qualsiasi modulo, il browser inserirà automaticamente il file nell'input.
• Nessun codice necessario: <input type="file"> nativo accetta file tramite drag-and-drop per impostazione predefinita.
• Il supporto per file multipli funziona con l'attributo multiple: seleziona un gruppo nell'esplora risorse, trascinalo sopra, l'intero blocco va al server in un'unica operazione.
• I dispositivi mobili non supportano questo trucco: le interfacce touch non implementano il trascinamento tra applicazioni.

Questo breve video dimostra come funziona <input type="file"> e i principi base del caricamento file nel browser. Capire questi fondamenti aiuta a rendersi conto del perché il drag-and-drop sul pulsante funzioni senza codice aggiuntivo.

Dove funziona

La funzionalità funziona su desktop in tutti i browser moderni. Abbiamo testato su Chrome, Firefox, Safari (macOS), Vivaldi ed Edge su Chromium, il file viene accettato correttamente in ognuno di essi. Secondo i dati di Can I Use, il supporto copre oltre il 95% degli utenti desktop già da diversi anni.

Se il campo ha l'attributo multiple, puoi trascinare un intero gruppo di file in una volta sola. Il browser li aggiunge tutti alla coda di caricamento e, dopo l'invio del modulo, il server riceve un array di file nel modo standard. In pratica, questo accelera radicalmente i caricamenti media in WordPress: seleziona una dozzina di immagini nell'esplora risorse, trascinale sul pulsante «Scegli file» nella libreria media e l'intero blocco va al server. Niente selezione uno a uno tramite finestra di dialogo.

I dispositivi mobili non supportano questo trucco. Le interfacce touch non implementano il trascinamento tra applicazioni nella forma che esiste su desktop. Ma per gli utenti desktop, ogni caricamento fa risparmiare 5-10 secondi ed elimina il carico cognitivo di navigare tra le cartelle.

Avvertenza importante: il trucco funziona solo con <input type="file"> nativo. Se un sito web usa un elemento personalizzato, un <div> o <button> stilizzato che apre programmaticamente la finestra di dialogo file, il trascinamento non funzionerà. Allo stesso modo, se il JavaScript del sito intercetta gli eventi dragover e drop a livello di documento e chiama e.preventDefault(), il comportamento nativo del browser viene bloccato.

Perché nessuno ne parla

Il paradosso: la funzionalità è nei browser da almeno un decennio, ma l'utente medio non lo sa. Spesso non lo sanno nemmeno gli sviluppatori: l'abitudine di ricorrere subito a librerie di drag-and-drop supera la voglia di verificare il comportamento nativo.

Da qui le tonnellate di tutorial sulle dropzone personalizzate. Lo stesso articolo su CSS-Tricks analizza in dettaglio un'implementazione JavaScript con gestori dragover e drop, leggendo i file tramite FileReader. Nel frattempo la capacità di base del browser raccoglie polvere nell'ombra.

Perché gli sviluppatori scrivono ancora le proprie dropzone:

• Feedback visivo. Il caricamento nativo non evidenzia il pulsante al passaggio del file e l'utente non capisce che il trascinamento funzionerà. Una dropzone personalizzata fornisce un contorno stilizzato, cambio di sfondo, animazione.

• Anteprima e validazione. Un'implementazione JavaScript mostra una miniatura dell'immagine prima del caricamento, controlla dimensione e tipo del file lato client, visualizza una barra di avanzamento.

• Zone multiple. Quando una pagina ha diversi punti di caricamento indipendenti, ad esempio una foto profilo e una galleria in un'area personale, serve un collegamento chiaro del file a un campo specifico.

Il supporto nativo non elimina questi scenari. Ma nei moduli semplici, caricare un documento per l'assistenza tecnica, inviare un curriculum, installare un plugin nell'amministrazione di WordPress, il codice personalizzato semplicemente non serve. Il browser sa già fare tutto.

Come aggiungere feedback visivo con un paio di righe

Se devi mantenere il comportamento nativo ma dare all'utente un suggerimento visivo, bastano CSS e JavaScript minimi. Il codice qui sotto evidenzia il pulsante di selezione file al passaggio di un file trascinato, senza toccare il meccanismo di caricamento stesso.

Crea un wrapper attorno a <input type="file"> nel markup:

1
<div class="file-upload-wrapper">
2
  <input type="file">
3
</div>

Lo script si aggancia all'intero documento, non a un input specifico, perché l'evento dragover si attiva quando si entra nella finestra del browser. Quando viene rilevato il trascinamento, la classe drag-over viene aggiunta al wrapper:

1
const fileInput = document.querySelector('input[type="file"]');
2
const wrapper = fileInput.closest('.file-upload-wrapper');
3
 
4
document.addEventListener('dragover', (e) => {
5
  e.preventDefault();
6
  wrapper?.classList.add('drag-over');
7
});
8
 
9
document.addEventListener('dragleave', (e) => {
10
  if (!e.relatedTarget || e.relatedTarget === document.documentElement) {
11
    wrapper?.classList.remove('drag-over');
12
  }
13
});
14
 
15
document.addEventListener('drop', (e) => {
16
  e.preventDefault();
17
  wrapper?.classList.remove('drag-over');
18
});

La classe drag-over è stilizzata con una riga di CSS. Sotto, un contorno tratteggiato blu e un leggero riempimento dello sfondo, che segnalano «rilascia qui»:

1
.file-upload-wrapper.drag-over input[type="file"] {
2
  outline: 2px dashed #2563eb;
3
  background: rgba(37, 99, 235, 0.05);
4
}

Il file finisce comunque nell'input in modo nativo. JavaScript non tocca il meccanismo di caricamento, aggiunge solo feedback visivo. Niente FileReader, niente FormData costruiti manualmente.

Se serve di più, validare tipo e dimensione prima dell'invio, anteprima immagine, barra di avanzamento, allora ha senso orientarsi verso una dropzone personalizzata completa. Per fortuna, MDN e web.dev hanno documentato questo processo dall'inizio alla fine.

⁉️🤔 Domande frequenti

Funziona in WordPress?

Sì, il caricatore standard di WordPress (plugin, temi, libreria media) è costruito su <input type="file"> nativo. Il trascinamento funziona direttamente nell'amministrazione senza plugin aggiuntivi. L'unica sfumatura: la libreria media in modalità griglia usa una dropzone personalizzata sopra il campo nativo, quindi lì il feedback visivo è più ricco, ma il meccanismo di base è lo stesso. Verificato su versioni di WordPress dalla 5.0 alla 6.7.

Quali formati di file sono supportati?

Il browser non impone restrizioni di formato durante il trascinamento: il file viene passato all'input così com'è. Se il campo ha un attributo accept (ad esempio, accept="image/*,.pdf"), il filtraggio scatterà a livello di input esattamente come quando si sceglie tramite la finestra di dialogo file. I file di tipo non supportato saranno nascosti dalla coda.

Il trascinamento è sicuro?

Assolutamente sì. Trascinare un file su <input type="file"> non dà al sito web accesso al file system dell'utente. Il browser passa solo il file stesso (o un array di file con multiple), ma non il suo percorso su disco. Il modello di sicurezza è lo stesso del caricamento tramite la finestra di selezione standard: il sito non sa da quale cartella proviene il file e non può leggere altri file vicini.

Perché il trascinamento non funziona su alcuni siti web?

Due motivi. Primo: il sito web non usa un <input type="file"> nativo, ma un elemento personalizzato, un <div> o <button> stilizzato che apre programmaticamente la finestra di dialogo file. Gli eventi nativi di drag-and-drop non sono associati a un elemento del genere. Secondo: il JavaScript del sito intercetta gli eventi dragover e drop a livello di documento e chiama e.preventDefault(), bloccando il comportamento standard del browser. Di solito gli sviluppatori catturano questi eventi per la propria dropzone e non si aspettano che questo rompa il caricamento nativo.

Posso trascinare un file da un browser all'altro?

No. Il meccanismo funziona solo dal file manager del sistema operativo nella finestra del browser. Il trascinamento tra schede o da un browser all'altro non è supportato: il modello di sicurezza del browser non consente l'accesso al file system di un altro contesto.

Cosa usare: dropzone o pulsante nativo

Il trucco di trascinare sul pulsante di selezione file fa risparmiare tempo e riduce l'attrito. Nessun bisogno di prendere il mouse, mirare al pulsante «Sfoglia», navigare nell'albero delle cartelle. Un gesto e il file è già nel modulo.

Per scenari semplici, caricare documenti, scansioni, archivi, installare plugin in WordPress, il comportamento nativo con un leggero miglioramento visivo è più che sufficiente. Prima di collegare kilobyte di JavaScript per una dropzone personalizzata, verifica: forse al tuo modulo basta quello che il browser sa già fare.

Se amministri siti web WordPress, al prossimo aggiornamento prova a trascinare un plugin o un tema direttamente sul pulsante di caricamento. Probabilmente ti sorprenderà quanto sia più semplice che navigare nel file manager.