dropzone.js maxfilesexceeded event not firing

Question

Я смотрю вокруг и играю немного сейчас с библиотекой dropzone.js и не могу получить maxfilesexceeded event для стрельбы. Я просмотрел сообщение How to limit the number of dropzone.js files uploaded? для информации и обновил до последней версии библиотеки, но событие все еще не срабатывает.

Я инициализирую прослушиватель в функции init(), как предложено в сообщении выше. Я могу поймать maxfilesreached события, но не maxfilesexceeded события

$scope.fileUploadConfig = { 
    options: { 
     url: uploadFileURL, 
     maxThumbnailFilesize: 200, 
     maxFiles: 5, 
     uploadMultiple: false, 
     acceptedFiles: "application/vnd.oasis.opendocument.text,application/rtf,application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel,.xls,.xlsx,application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.presentation,.ppt,.pptx,image/*,.mp3,.m4a,.ogg,.wav,.wma", 
     addRemoveLinks: true, 
     paramName: "file", 
     dictRemoveFile: "Remove", 
     clickable: true, 
     previewTemplate: $("#dropzone-preview-template").html(), 
     init: function() { 
      var instance = this, 
       selectedPageId = 0; 

      instance.on("success", function(event, data) { 
       /* ... */ 
      }); 

      instance.on("addedfile", function() { 
       /* ... */ 
      }); 

      instance.on("removedfile", function(file) { 
       /* ... */ 
      }); 

      instance.on("maxfilesreached", function(file) { 
       alert("MAX_FILES_REACHED"); 
      }); 

      instance.on("maxfilesexceeded", function(file) { 
       alert("MAX_FILES_EXCEEDED"); 
      }); 
     } 
    } 
}; 

Весь код работает, как ожидается, за исключением случая, maxfilesexceeded.

Answer 1

создать этот тестовый пример ниже:

Dropzone.autoDiscover = true; 
 
Dropzone.options.fbDropZone = { 
 
    init: function() { 
 
     instance = this; 
 
     instance.on("maxfilesreached", function(file) { 
 
       alert("MAX_FILES_REACHED"); 
 
     }); 
 
     instance.on("maxfilesexceeded", function(file) { 
 
       alert("MAX_FILES_EXCEEDED"); 
 
     }); 
 
    }, 
 
    previewTemplate: '<div class="dz-preview dz-file-preview"><div class="dz-details"><div class="dz-filename"><span data-dz-name></span></div><div class="dz-size" data-dz-size></div><img data-dz-thumbnail /></div><div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div><div class="dz-success-mark"><span>✔</span></div><div class="dz-error-mark"><span>✘</span></div><div class="dz-error-message"><span data-dz-errormessage></span></div></div>', 
 
    paramName: "file", 
 
    maxFiles: 1, 
 
    autoProcessQueue: false 
 
};

#drop_zone { 
 
    width: 50%; 
 
    border: 2px dashed #BBB; 
 
    border-radius: 5px; 
 
    padding: 25px; 
 
    text-align: center; 
 
    color: #BBB; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.js"></script> 
 
<div id='drop_zone'> 
 
    <form action="/uploads.php" class='dropzone' id='fbDropZone'></form> 
 
</div>

Когда вы подключаетесь dropzonejs с angularjs, то лучше создать директиву для dropzonejs