AddFile Widget

Permette il carimanto drag and drop di file in un form

// API dBJs-ui

Options and settings:
- data-afMax : numero massimo di file
- data-afMaxSize : massimo peso dei file in bytes
- data-afName : proprietà "name" dell'array input

Standard sintax

    <div class="addFile" data-afMax="5" data-afMaxSize="1048576" data-afName="myInputName">
      <div class="dropzone"></div>
      <button type="button" class="addFileButton">+</button> <span class="fileInfo"></span> 
      <input class="fileInput" type="file" multiple="multiple" />
      <div class="preview"></div>
    </div>

Questo widget della libreria dBJs-ui richiede esplicitamente l'impostazione della proprietà data-dBJs per il tag html del documento in cui è: tale proprietà deve avere il valore del percorso assoluto della cartella dBJs in cui è contenuta la libreria. Nel seguente snippet si ipotizza che tale cartella sia stata insetita nella root del proggetto.

    <html data-dBJs="http://www.example.com/">

Nel seguente esempio è mostrato come funziona l'oggetto AddFile. L'oggetto AddFile effettua un upload dinamico sul server sia attraverso il pulsante input type file classico sia con modalità drag and drop, all'evento i file saranno caricati sul server nella cartella temporanea uploads contenuta nella directory della libreria dBJs e il widget genererà un input di tipo hidden (nascosto) avente come valore il nome temporaneo del file creato lato server.

Le operazioni descritte prima consentono di inserire il widget AddFile all'interno di un form ottenendo una lista di input hidden con proprietà name uguale al valore dato all'attributo data-afName, tale attributo se non viene impostato il valore del name sarà filename[]. Impostare il name del gruppo di file draggati permette ci inserire all'interno dello stesso form più volte il widget AddFile crando gruppi di versi di file in array con name diversi.
Il submit del form permetterà poi di avere nel vostro script lato server un array con i nomi dei file e con personale implementazione di codice, conoscendo la posizione della cartella temporanea, sarà possibile spostarli, rinominarli, manipolarli ecc.

All'atto di upload sul server lo script PHP che esegue l'operazione controlla anche che nella cartella temporanea non ci siano file più vecchi di un'ora, qualora ve ne siano saranno automaticamente cancellati, pertanto è suggerito spostarli ogni qualvolta il widget viene integrato in una vostra funzionalità.

È possibile omettere i due attibuti data per permettere un upload infinito sia in termini di spazio su disco occupato che di numero di file massimo.

Dalla struttura html del widget è possibile rimuovere lo span con classe fileInfo qualora non si vogla visualizzare lo spazio su disco occupato dai file di cui si è effettuato l'upload e il limite massimo previsto.

Example 1