Come disabilitare il modulo cliccabile con Dropzone.js?

Question

Sto usando Dropzone.js per caricare file sul server. Ho impostato il mio parametro Dropzone maxFiles-10 e mi è stato provato questo:

$('.dropzone').dropzone({ 
    maxFiles: 10, 
    init: function() { 
     this.on('maxfilesreached', function() { 
      $('.dropzone').unbind('click'); 
     }); 
    } 
}); 

... ma non funziona. Qual è la soluzione da rimuovere cliccabile da .dropzone o in altro modo per impedire all'utente di aggiungere altri file?

Answer 1

Eccoci, aggiornati in base ai commenti riportati di seguito.

Come disattivare la zona di lancio "click per aprire la finestra di file di dialogo" Evento quando viene raggiunta maxfiles:

$('.dropzone').dropzone({ 
    maxFiles: 10, 
    init: function() { 
     this.on('maxfilesreached', function() { 
      $('.dropzone').removeClass('dz-clickable'); // remove cursor 
      $('.dropzone')[0].removeEventListener('click', this.listeners[1].events.click); 
     }); 
    } 

non so quanto è affidabile il "1" in this.listeners[1] è, ma è lì che il clic la funzione evento vive nella mia attuale configurazione dropzone.

Answer 2

C'è un campo di opzione sull'oggetto Dropzone chiamato clickable che per impostazione predefinita è true.

A seconda dello scenario, è possibile impostarlo su false quando si registra l'istanza di Dropzone oppure è possibile aggiornare il valore in fase di runtime in base alle esigenze.

Answer 3

Questo funziona PERFETTAMENTE !!! e funziona su 4.0.1

//disable the click of your clickable area 
$(".dz-hidden-input").prop("disabled",true); 

//enalbe the click of your clickable area 
$(".dz-hidden-input").prop("disabled",false); 

Answer 4

Perché non usare semplicemente CSS per disabilitare l'evento click. Al raggiungimento dei file massimi, Dropzone aggiungerà automaticamente una classe di dz-max-files-reached.

usare i CSS per disabilitare click sulla zona di lancio: .dz-max-files-reached { pointer-events: none; cursor: default; }

Answer 5

myDropzone.on('maxfilesreached', function() { 
    myDropzone.removeEventListeners(); 
}); 
myDropzone.on('removedfile', function (file) { 
    myDropzone.setupEventListeners(); 
}); 

Non ti dimenticare init _updateMaxFilesReachedClass se si dispone di file dal server.

myDropzone._updateMaxFilesReachedClass()