Dropzone Upload nur eine Datei

Question

Ich benutze dropzone.js für meine Drag-Drop-Datei-Upload-Lösung. Ich möchte nur eine Datei hochladen, wenn ich die zweite Datei hochlade, sollte die erste entfernt werden und die zweite sollte hochgeladen werden. eine Ahnung, wie es zu tun ..

hier ist mein html

<form class="dropzone dz-clickable" action="upload.php" enctype='multipart/form-data'> 
    <i class="fa fa-cloud-upload element"></i> 
    <div style="color:gray;">Drag and drop or click to upload image</div> 
    <input type="hidden" name="filenameEmail" class="filenameEmail" value=""> 
    <input type="hidden" name="side" value="front"> 
</form> 

i dropzone.js geändert

maxFiles: 1 

es nur eine Datei hochladen lassen, aber ich kann die zuvor hochgeladen entfernen file.please help me out.thanks im Voraus

Answer 1

maxFiles: 1 wird verwendet, um dropzone zu sagen, dass es b e nur eine Datei. Wenn mehr als 1 Datei vorhanden ist, wird die Funktion maxfilesexceeded aufgerufen, wobei die überzählige Datei der erste Parameter ist.

hier ist eine einfache Funktion Vorschau der ersten Datei zu löschen und die neue :)

maxFiles:1, 
init: function() { 
     this.on("maxfilesexceeded", function(file) { 
      this.removeAllFiles(); 
      this.addFile(file); 
     }); 
} 

Answer 2

Begrenzung maxFiles-1 noch mehrere Dateien in Upload-Dialog Auswahl hinzufügen können. Um nicht zuzulassen mehrere Bilder in der Konfiguration der Auswahl angeben Funktion nach init:

maxFiles:1, 
init: function() { 
    this.hiddenFileInput.removeAttribute('multiple'); 
} 

Answer 3

I verwendet Ereignis maxfilesexceeded mit Methode addFile und rans in Endlosschleife von Ereignisaufruf. Es sollte das Problem sein, addFile zu verwenden, weil ich es weder in der offiziellen Website noch im GitHub-Wiki erwähnt habe. Schließlich habe ich mit addedfile Ereignis gelöst. Die Dropzone.js ist die neueste Version, wenn ich schreibe (4.3.0).

init: function() { 
    this.on('addedfile', function(file) { 
    if (this.files.length > 1) { 
     this.removeFile(this.files[0]); 
    } 
    }); 
} 

Answer 4

Keine dieser Lösungen funktionierte für mich.

Das Ereignis maxfilesexceeded wird zu spät aufgerufen, d. H. Nach einem Versuch, die Datei hinzuzufügen.

Andere Lösungen mit this.removeFile(this.files[0]); ergab eine "Uncaught TypeError: Cannot read property 'removeChild' of null". oder eine Endlosschleife.

Gelöst von -

maxFiles: 2, 
init: function() { 

    this.on("addedfile", function (file) { 
     if (this.files.length > 1) { 
      this.files = this.files.slice(1, 2);       
     } 
    }); 

} 

Works, wenn dz-clickable (Dateiauswahl BTN) und per Drag & Drop.