Carica più file in Struts2 con Dropzone.js

Sto usando DropZone.js

La mia configurazione è

Dropzone.options.myAwesomeDropzone = { url: 'UploadImages', previewsContainer: ".dropzone-previews", uploadMultiple: true, parallelUploads: 5, maxFiles: 20, addRemoveLinks: true, init: function() { this.on("success", function(file, response) { $('.dz-progress').hide(); console.log(response); console.log(file); }); } } }); 

Questo codice funziona perfettamente con il mio host locale. Sto caricando i file UploadImages di UploadImages . Ho inserito un messaggio in quel metodo url che funziona correttamente.

Il mio problema è che non sto ottenendo quale nome dovrei usare per ottenere il contenuto nel server. Come quello che è il nome della variabile imageFile, variabile imageName, imageContent Type che dovrei accedere nella mia implementazione lato server.

Modifica: implementazione lato server di DropZone

Dropzone non fornisce l’implementazione lato server della gestione dei file, ma il modo in cui i file vengono caricati è identico a semplici moduli di caricamento file come questo:

 

Ho capito include

  

automaticamente in forma in modo che possiamo accedervi utilizzando il file

Se

  

allora possiamo accederci usando il file[] sul lato server che ho provato

  public class ImageAction extends ActionSupport { private List file; private List fileContentType; private List fileFileName; System.out.println("Inside Image upload "); System.out.print("\n\n---------------------------------------\n"); int i = 0; for (File f : file) { System.out.print("\nFile [" + i + "] "); System.out.print(" length: " + f.length()); System.out.print(" name:" + getFileFileName().get(i)); System.out.print(" contentType: " + getFileContentType().get(i)); i++; } System.out.println("\n---------------------------------------\n"); } //getter setter } 

Sta stampando il caricamento di Inside Image.

Come rendere i campi di accesso del file sulla class Action.

Problema

Quando usi

  

i file saranno tutti inviati con name="file" , ad esempio:

 Content-Disposition: form-data; name="file"; filename="foo.jpg" Content-Type: image/jpeg ........... . ... ....... Content-Disposition: form-data; name="file"; filename="bar.jpg" Content-Type: image/jpeg .... . .. ....... 

e questo è il parametro giusto Struts2 FileUpload Interceptor si aspetta di ricevere, di lavorare con un List e l’ List correlato List per fileName e contentType .

Quando usi dropzone.js , invece, il nome del file verrà modificato per gestire il lato input multiplo lato client, aggiungendo [] ad esso:

paramName : il nome del file param che viene trasferito. Predefinito per file. NOTA : Se hai l’opzione uploadMultiple set su true, Dropzone aggiungerà [] al nome.

per esempio.

 Content-Disposition: form-data; name="file[0]"; filename="foo.jpg" Content-Type: image/jpeg ........... . ... ....... Content-Disposition: form-data; name="file[1]"; filename="bar.jpg" Content-Type: image/jpeg .... . .. ....... 

A Struts2 non piace affatto.

Soluzione

Invece di scherzare con Interceptors e Converters personalizzati, esegui una semplice regolazione sulla libreria dropzone.js che utilizzi per i tuoi progetti Struts2:

  1. Rinomina il tuo dropzone-struts2.js ;
  2. Apri il file e cerca "[" + n + "]" (riga 866 nella versione più recente)
  3. Cambia questa linea

     return "" + this.options.paramName + (this.options.uploadMultiple ? "[" + n + "]" : ""); 

    a questo

     return "" + this.options.paramName; //+ (this.options.uploadMultiple ? "[" + n + "]" : ""); 

Ora è conforms a Struts2 e funzionerà con più caricamenti.