DropzoneJS：防止上传和显示不受支持的文件

Question

对于我的项目，我使用拖放库 DropzoneJS。它运行良好，但我希望有一个特定的功能（据我所知）不受支持 'out of the box'。

在我的 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

Answer 2

myDropzone.on("error", function(file, message, xhr) {
                if(xhr == null) myDropzone.removeFile(file);
                alert(message)
            });

DropzoneJS：防止上传和显示不受支持的文件

DropzoneJS: Prevent uploading and displaying unsupported files

javascript

drag-and-drop

dropzone.js