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

时间:2017-05-11 09:50:46

标签: javascript drag-and-drop dropzone.js

对于我的项目,我正在使用Drag&删除库DropzoneJS。它工作得很好,但我希望有一个特定的功能(据我所见)不支持'开箱即用'。

在我的Dropzone配置中,我已经指定了acceptedFiles:

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

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

我想要达到的目标是阻力和阻力。 drop首先检查文件是否受支持,并自动丢弃不支持的文件。我仍然想显示一条错误消息,指出某些文件不受支持。

供参考,这是我完整的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
      });
    }
  }
}

2 个答案:

答案 0 :(得分:5)

如果出现问题,您可以通过某种通知来捕获错误并删除该文件:

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

答案 1 :(得分:0)

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