DropzoneJS：サポートされていないファイルのアップロードと表示を防止する

Question

私のプロジェクトでは、Drag &ドロップライブラリDropzoneJSを使用しています。それはうまく機能していますが、（私が見るところでは）アウト・オブ・ザ・ボックスではサポートされていない特定の機能が必要です。私のドロップゾーンの設定で

私はacceptedFilesを指定した：私は、参照ボタンを使用すると、ファイルがサポートされているかどうかを

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

それが自動的にチェックします。しかし、&のドロップファイルをドラッグすると、すでにアップロードが完了した後にチェックが行われ、エラーメッセージとともにファイルが表示されます。

私が達成したいのは、ファイル&が最初にファイルがサポートされているかどうかチェックし、サポートされていないファイルを自動的に破棄することです。私はまだいくつかのファイルがサポートされていないことを示すエラーメッセージを表示したいと思います。

参考のために、ここに私の完全なドロップゾーンの設定です：

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