Come limitare il numero di file dropzone.js caricati?

Question

A seconda del caso d'uso, come posso limitare il numero di file consentito da dropzone.js?

Ad esempio, potrebbe essere necessario consentire solo 1, 2 o 4 file caricati.

Non è uploadMultiple. Sfortunatamente, uploadMultiple si applica solo al numero di file gestiti per richiesta.

Answer 1

Nowell pointed it out that this has been addressed a partire dal 6 agosto, 2013. Un esempio di lavoro utilizzando questo modulo potrebbe essere:

<form class="dropzone" id="my-awesome-dropzone"></form> 

È possibile utilizzare questo JavaScript:

Dropzone.options.myAwesomeDropzone = { 
    maxFiles: 1, 
    accept: function(file, done) { 
    console.log("uploaded"); 
    done(); 
    }, 
    init: function() { 
    this.on("maxfilesexceeded", function(file){ 
     alert("No more files please!"); 
    }); 
    } 
}; 

L'elemento dropzone anche ottiene uno stile speciale, quindi puoi fare cose come:

<style> 
    .dz-max-files-reached {background-color: red}; 
</style> 

Answer 2

sembra che maxFiles sia il parametro che stai cercando.

https://github.com/enyo/dropzone/blob/master/src/dropzone.coffee#L667

Answer 3

maxFiles: 1 fa il lavoro, ma se si desidera anche rimuovere i file aggiuntivi che si possono utilizzare questo codice di esempio preso dal Wiki page:

Come posso limitare il numero di file?

Sei fortunato! A partire da 3.7.0 Dropzone supporta l'opzione maxFiles . Basta impostarlo sulla quantità desiderata e sei a posto. Se non si desidera che i file respinti per essere visualizzati, basta registrarsi per l'evento maxfilesexceeded, e rimuovere immediatamente il file:

myDropzone.on("maxfilesexceeded", function(file) 
{ 
    this.removeFile(file); 
}); 

Answer 4

ho raggiunto questo un modo leggermente diverso. Rimuovo il vecchio file abbandonato ogni volta che viene aggiunto un nuovo file. Funziona come sovrascrivere il file che è stata l'esperienza utente che stavo andando qui.

Dropzone.options.myAwesomeDropzone = { 
    accept: function(file, done) { 
    console.log("uploaded"); 
    done(); 
    }, 
    init: function() { 
    this.on("addedfile", function() { 
     if (this.files[1]!=null){ 
     this.removeFile(this.files[0]); 
     } 
    }); 
    } 
}; 

Answer 5

ho pensato che il processo di caricamento singolo file più intuitivo è stato quello di sostituire il file precedente su di una nuova voce.

$(".drop-image").dropzone({ 
    url: '/cart?upload-engraving=true', 
    maxFiles: 1, 
    maxfilesexceeded: function(file) { 
     this.removeAllFiles(); 
     this.addFile(file); 
    } 
}) 

Answer 6

Il problema con le soluzioni fornite è che è possibile caricare solo 1 file in assoluto. Nel mio caso, avevo bisogno di caricare solo 1 file alla volta (su click o su drop).

Questa era la mia soluzione ..

Dropzone.options.myDropzone = { 
     maxFiles: 2, 
     init: function() { 
      this.handleFiles = function(files) { 
       var file, _i, _len, _results; 
       _results = []; 
       for (_i = 0, _len = files.length; _i < _len; _i++) { 
        file = files[_i]; 
        _results.push(this.addFile(file)); 
        // Make sure we don't handle more files than requested 
        if (this.options.maxFiles != null && this.options.maxFiles > 0 && _i >= (this.options.maxFiles - 1)) { 
         break; 
        } 
       } 
       return _results; 
      }; 
      this._addFilesFromItems = function(items) { 
       var entry, item, _i, _len, _results; 
       _results = []; 
       for (_i = 0, _len = items.length; _i < _len; _i++) { 
        item = items[_i]; 
        if ((item.webkitGetAsEntry != null) && (entry = item.webkitGetAsEntry())) { 
         if (entry.isFile) { 
          _results.push(this.addFile(item.getAsFile())); 
         } else if (entry.isDirectory) { 
          _results.push(this._addFilesFromDirectory(entry, entry.name)); 
         } else { 
          _results.push(void 0); 
         } 
        } else if (item.getAsFile != null) { 
         if ((item.kind == null) || item.kind === "file") { 
          _results.push(this.addFile(item.getAsFile())); 
         } else { 
          _results.push(void 0); 
         } 
        } else { 
         _results.push(void 0); 
        } 
        // Make sure we don't handle more files than requested 
        if (this.options.maxFiles != null && this.options.maxFiles > 0 && _i >= (this.options.maxFiles - 1)) { 
         break; 
        } 
       } 
       return _results; 
      }; 
     } 
    }; 

Spero che questo aiuti;)

Answer 7

vorrei sottolineare. forse questo mi capita, TUTTAVIA, quando uso this.removeAllFiles() in dropzone, spara l'evento COMPLETO e questo succede, quello che ho fatto è stato controllare se il file Data era vuoto o meno così potevo effettivamente inviare il modulo.

Answer 8

Perché non utilizzare semplicemente CSS per disabilitare l'evento click. Quando viene raggiunto il numero massimo di file, Dropzone aggiungerà automaticamente una classe di file dz-max-raggiunti.

usare i CSS per disabilitare cliccare su zona di lancio:

.dz-max-files-reached { 
      pointer-events: none; 
      cursor: default; 
} 

di credito: questo answer

Answer 9

È possibile limitare il numero di file caricati, modificando in dropezone.js

Dropzone.prototype.defaultOptions = { maxFiles: 10, }

Answer 10

È anche possibile aggiungere in callbac ks - qui sto usando Dropzone per angolare

dzCallbacks = { 
    'addedfile' : function(file){ 
     $scope.btSend = false; 
     $scope.form.logoFile = file; 
    }, 
    'success' : function(file, xhr){ 
     $scope.btSend = true; 
     console.log(file, xhr); 
    }, 
    'maxfilesexceeded': function(file) { 
     $timeout(function() { 
      file._removeLink.click(); 
     }, 2000); 
    } 
} 

Answer 11

soluzione alternativa che ha funzionato molto bene per me:

init: function() { 
    this.on("addedfile", function(event) { 
     while (this.files.length > this.options.maxFiles) { 
      this.removeFile(this.files[0]); 
     } 
    }); 
}