programmazione Aggiungi file esistente per Dropzone

Question

Sto cercando di aggiungere un'immagine esistente al mio dropzone di programmazione, utilizzando il dropzone.js FAQ come guida:

// Add the existing image if it's there. 
// headerDropzone is my dropzone (debug shows it as existing and initialized at this point. 
var on_load_header = $('[name="on_load_header_image"]').val(); 
var on_load_header_path = $('[name="on_load_header_image_path"]').val(); 

if (on_load_header) { 

    // Hardcoded size value is just for testing, see my second question below. 
    var on_load_header_data = { name: on_load_header, size: 12345 }; 

    // Call the default addedfile event handler 
    headerDropzone.options.addedfile.call(headerDropzone, on_load_header_data); 

    // And optionally show the thumbnail of the file: 
    headerDropzone.options. thumbnail.call(headerDropzone, on_load_header_data, on_load_header_path); 

} 

Il mio primo problema è che questo è solo non funziona. L'evento addedfile non viene attivato (o almeno il gestore file aggiunto in headerDropzone non viene mai attivato), lo stesso vale per la miniatura.

Il mio secondo problema/domanda è: devo fornire la dimensione del file? Potrei prenderlo dal lato server, ma preferirei non farlo se non ne avessi bisogno.

Answer 1

Vedere se le funzioni headerDropzone.options.addedfile e headerDropzone.options.thumbnail sono effettivamente definite. Dovrebbe funzionare come hai fatto, ma senza ulteriori informazioni è difficile dire cosa c'è che non va.

Informazioni sul formato: No, non è necessario fornire effettivamente il file esatto. È solo che Dropzone visualizza automaticamente il file. Se non ti interessa se viene visualizzato qualche file falso, puoi semplicemente fornire un numero casuale o 0. Altrimenti potresti voler nascondere la dimensione del file con i CSS o con JS dopo averlo aggiunto. (L'elemento in questione ha la classe dz-size

La versione JavaScript del sarebbe simile a questa:.

var fileSizeElement = on_load_header_data.previewElement.querySelector(".dz-size"); 
fileSizeElement.parentNode.removeChild(fileSizeElement); 

Answer 2

Se è necessario aggiungere più file esistenti in Dropzone, dichiarare i file esistenti come array e quindi aggiungere in dropzone a livello di codice all'interno di un ciclo in questo modo ...

 Dropzone.autoDiscover = false; 
     var myDropzone = new Dropzone("#myDropzone", { 
      url: "/file/post", 
      maxFileSize: 50, 
      acceptedFiles: ".pdf", 
      addRemoveLinks: true, 
      //more dropzone options here 
     }); 

     //Add existing files into dropzone 
     var existingFiles = [ 
      { name: "Filename 1.pdf", size: 12345678 }, 
      { name: "Filename 2.pdf", size: 12345678 }, 
      { name: "Filename 3.pdf", size: 12345678 }, 
      { name: "Filename 4.pdf", size: 12345678 }, 
      { name: "Filename 5.pdf", size: 12345678 } 
     ]; 

     for (i = 0; i < existingFiles.length; i++) { 
      myDropzone.emit("addedfile", existingFiles[i]); 
      //myDropzone.emit("thumbnail", existingFiles[i], "/image/url"); 
      myDropzone.emit("complete", existingFiles[i]);     
     } 

Answer 3

Il Dropzone FAQ lascia fuori importanti impostazioni necessarie per precaricare propriamente una zona di lancio con (a) file (s) esistente.

Il mio metodo init per la mia zona di lancio:

Dropzone.options.MyDropZoneID = { 
    ... 
    init: function() { 
     var mockFile = { name: fileName, size: fileSize, type: fileMimeType, serverID: 0, accepted: true }; // use actual id server uses to identify the file (e.g. DB unique identifier) 
     this.emit("addedfile", mockFile); 
     this.createThumbnailFromUrl(mockFile, fileUrl); 
     this.emit("success", mockFile); 
     this.emit("complete", mockFile); 
     this.files.push(mockFile); 
     ... 

non so se quanto precede è un'implementazione perfetto, ma funziona correttamente con l'impostazione maxfiles. Il che è molto importante se non si desidera un comportamento bacato (come il messaggio predefinito che mostra quando non dovrebbe o i file aggiuntivi vengono caricati). È assolutamente necessario impostare la proprietà accettata su true e aggiungere il file alla proprietà dei file. L'unica cosa che penso non è richiesta sta emettendo il successo. Non ho ancora giocato abbastanza per saperlo con certezza.

Nota: ho usato il seguente pacchetto NuGet:

• Creato da: Matias Meno
• Id: zona di lancio
• Versione: 4.2.0

Answer 4

Originariamente stavo facendo qualcosa in questo senso per caricare a livello di codice in un file pre-esistente per Dropzone:

headerDropzone.emit("addedfile", imageFile);         
headerDropzone.emit("thumbnail", imageFile, imageUrl); 
headerDropzone.files.push(file); 

Tuttavia, fa riferimento a questo Dropzone Github Issue ho trovato un modo più semplice per caricare direttamente:

headerDropzone.uploadFiles([imageFile]) 

Purtroppo non ci sono riferimenti a questo metodo uploadFiles nello Dropzone Documentation, quindi ho pensato di condividere alcune conoscenze con tutti gli utenti di Dropzone.

Spero che questo aiuti qualcuno

Answer 5

Ho avuto lo stesso problema e ho trovato il metodo di Dropzone handleFiles(files).

Quindi, se avete inputTypeFileRef, è possibile

// inputTypeFiles.files is an object of type FileList 
var fileArray = Object.values(inputTypeFiles.files || {}); 
myDropZone.handleFiles(fileArray); 

che sarà anche innescare tutti gli eventi 's il Dropzone e trasmettere i dati del file (s) che si farebbe normalmente trascinando un file su di esso - il progresso, il file dimensioni, ecc.

Spero che sia stato utile.

Answer 6

questo è ora risolta in ufficiale FAQ

// Create the mock file: 
var mockFile = { name: "Filename", size: 12345 }; 

// Call the default addedfile event handler 
myDropzone.emit("addedfile", mockFile); 

// And optionally show the thumbnail of the file: 
myDropzone.emit("thumbnail", mockFile, "/image/url"); 
// Or if the file on your server is not yet in the right 
// size, you can let Dropzone download and resize it 
// callback and crossOrigin are optional. 
myDropzone.createThumbnailFromUrl(file, imageUrl, callback, crossOrigin); 

// Make sure that there is no progress bar, etc... 
myDropzone.emit("complete", mockFile); 

// If you use the maxFiles option, make sure you adjust it to the 
// correct amount: 
var existingFileCount = 1; // The number of files already uploaded 
myDropzone.options.maxFiles = myDropzone.options.maxFiles - existingFileCount;