javascript - DropzoneJS : Prevent uploading and displaying unsupported files

Question

对于我的项目，我使用拖放库 DropzoneJS。它工作得很好，但我希望有一个特定的功能(据我所知)不受“开箱即用”的支持。

在我的 Dropzone 配置中，我指定了 acceptedFiles:

acceptedFiles: ".png,.jpg,.jpeg,.gif,.pdf"

当我使用浏览按钮时，它会自动检查文件是否受支持。但是当我拖放文件时，检查是在上传完成后完成的，并显示带有错误消息的文件。

我想实现的是拖放首先检查是否支持文件，并自动丢弃不支持的文件。我仍然想显示一条错误消息，指出某些文件不受支持。

作为引用，这是我完整的 Dropzone 配置:

import Dropzone from 'dropzone';

export default class UI_DropZone {
  constructor() {
    if (document.querySelector('#dropZone')) {
      let previewNode = document.querySelector("#template");
      previewNode.id = "";
      let previewTemplate = previewNode.parentNode.innerHTML;
      previewNode.parentNode.removeChild(previewNode);

      return new Dropzone("#dropZone", {
        url: "/dist/files",
        thumbnailWidth: 300,
        thumbnailHeight: 300,
        parallelUploads: 20,
        maxFilesize: 10,
        acceptedFiles: ".png,.jpg,.jpeg,.gif,.pdf",
        previewTemplate: previewTemplate,
        previewsContainer: '#previews',
        clickable: '.fileinput-button',
        autoProcessQueue: false
      });
    }
  }
}

Answer 1

如果有问题，您可以捕获错误并通过某种通知删除文件:

init: function() {
    this.on("error", function(file, message, xhr) { 
       if (xhr == null) this.removeFile(file); // perhaps not remove on xhr errors
       alert(message);
    });
 }

所以你的配置看起来像这样:

return new Dropzone("#dropZone", {
    url: "/dist/files",
    thumbnailWidth: 300,
    thumbnailHeight: 300,
    parallelUploads: 20,
    maxFilesize: 10,
    acceptedFiles: ".png,.jpg,.jpeg,.gif,.pdf",
    previewTemplate: previewTemplate,
    previewsContainer: '#previews',
    clickable: '.fileinput-button',
    autoProcessQueue: false,
    "error": function(file, message, xhr) {
       if (xhr == null) this.removeFile(file); // perhaps not remove on xhr errors
       alert(message);
    }
});

示例:https://jsfiddle.net/m4ye8gL2/1