Andrea Gandino

Uno degli assiomi dell’esperienza di navigazione propria di ognuno di noi è che compilare i campi dei moduli è piuttosto seccante.

Prendiamo un caso specifico di modulo: se si deve effettuare l’upload di tre foto, ad esempio, può risultare estremamente noioso dover ripetere l’operazione di invio del modulo per ben tre volte; se il modulo prevede l’upload di più files alla volta, rimane la limitazione del numero fisso di file che è possibile caricare.

Per ovviare a questi problemi, e rendere così leggermente meno doloroso l’invio di moduli con più file, bisogna necessariamente intervenire mediante Javascript

La soluzione che mi pare essere la più diffusa prevede la possibilità, mediante la pressione di un bottone, di inserire quanti campi di file si voglia, uno di seguito all’altro.

Personalmente trovo che, sebbene molto efficace, questa soluzione non sia il massimo quanto a chiarezza, per l’utente finale. L’elenco dei campi di file fa aumentare considerevolmente la lunghezza dell’intero modulo, cosa che in generale sarebbe meglio evitare. Inoltre non è possibile avere una chiara percezione di quali file si stia per caricare, dal momento che il percorso del file molto spesso è più lungo della larghezza del campo dov’è stato immesso.

Per finire, l’unico modo certo per evitare l’upload di un file è un reset dell’intero form; un’eventualità, quella della cancellazione dell’upload, che esiste e che non è neanche così remota, sebbene lato server possano essere messe in atto contromisure adeguate.

Una possibile soluzione

Partendo da questo presupposto, ho pensato non fosse una brutta idea scrivere uno script per snellire l’aspetto di quei moduli che consentono il caricamento di più file alla volta.

Spiegare lo script che ho realizzato riga per riga diventerebbe decisamente pesante e oltremodo noioso, anche per dei nerd“persone genuinamente interessate all’informatica” come me, quindi riassumo velocemente:

• Aggiungo prima tutti i file che mi servono, uno per uno, apparentemente usando sempre lo stesso campo di input.
• Ad ogni inserimento di un nuovo file, aggiorno un’apposita lista creata per avere sottomano l’elenco dei file che si sta per caricare in maniera semplice e leggibile.
• Eseguendo un doppio click su un elemento di quella lista è possibile annullare l’upload di quel particolare file.

I vantaggi, sebbene lo script non abbia nessuna pretesa di completezza, sono due:

1. Il contenuto è molto più semplice da aggiungere e da visualizzare.
2. Non si deve necessariamente compiere un reset in caso di errore.

Infine, ho cercato di rendere lo script il più possibile accessibile, in modo che il suo utilizzo non sia precluso anche a coloro i quali navigano in condizioni non convenzionali, per così dire.

Nello specifico, in caso di Javascript disattivato o totalmente assente (come ad esempio nei browser testuali), la funzionalità non è preclusa in assoluto (lo script è dunque degradabile), ma limitata a un solo file; in altre parole, si perde il concetto di multi-upload, ma non si perde la possibilità di ottenere lo scopo che anche il multi-upload si proponeva, ovvero il caricamento di un file sul server.

In caso di CSS disabilitati e Javascript abilitato, lo script è comunque fruibile nella sua interezza.

Un piccolo problema si riscontra nel caso in cui sia i CSS, sia Javascript siano disabilitati, dal momento che il bottone aggiungi, pur avendo perso la sua funzionalità, rimane visibile, rischiando quindi di risultare fuorviante per l’utente finale.

Come sempre, vi rimando all’apposito esempio, avvertendovi che, per ovvie ragioni, l’upload (ma non l’invio del form) è disabilitato.