DropzoneJS:阻止上传和显示不支持的文件

Question

对于我的项目,我正在使用Drag&Drop库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