DropZonejs：ファイルなしでフォームを送信する
既存のフォーム内にdropzone.jsを正常に統合しました。このフォームは、添付ファイルとチェックボックスなどの他の入力を投稿します。
添付ファイル付きのフォームを送信すると、すべての入力が適切に送信されます。ただし、ユーザーが添付ファイルなしでフォームを送信できるようにしたいと考えています。添付ファイルがない場合、Dropzoneはフォームの送信を許可しません。
このデフォルトの動作をオーバーライドして、添付ファイルなしでdropzone.jsフォームを送信する方法を誰かが知っていますか？ありがとうございました！
$( document ).ready(function () {
Dropzone.options.fileUpload = { // The camelized version of the ID of the form element
// The configuration we've talked about above
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 50,
maxFiles: 50,
addRemoveLinks: true,
clickable: "#clickable",
previewsContainer: ".dropzone-previews",
acceptedFiles: "image/*,application/pdf, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.openxmlformats-officedocument.spreadsheetml.template, application/vnd.openxmlformats-officedocument.presentationml.template, application/vnd.openxmlformats-officedocument.presentationml.slideshow, application/vnd.openxmlformats-officedocument.presentationml.presentation, application/vnd.openxmlformats-officedocument.presentationml.slide, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/vnd.openxmlformats-officedocument.wordprocessingml.template, application/vnd.ms-Excel.addin.macroEnabled.12, application/vnd.ms-Excel.sheet.binary.macroEnabled.12,text/rtf,text/plain,audio/*,video/*,.csv,.doc,.xls,.ppt,application/vnd.ms-PowerPoint,.pptx",
// The setting up of the dropzone
init: function() {
var myDropzone = this;
// First change the button to actually tell Dropzone to process the queue.
this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {
// Make sure that the form isn't actually being sent.
e.preventDefault();
e.stopPropagation();
myDropzone.processQueue();
});
// Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
// of the sending event because uploadMultiple is set to true.
this.on("sendingmultiple", function() {
// Gets triggered when the form is actually being sent.
// Hide the success button or the complete form.
});
this.on("successmultiple", function(files, response) {
window.location.replace(response.redirect);
exit();
});
this.on("errormultiple", function(files, response) {
$("#notifications").before('<div class="alert alert-error" id="alert-error"><button type="button" class="close" data-dismiss="alert">×</button><i class="icon-exclamation-sign"></i> There is a problem with the files being uploaded. Please check the form below.</div>');
exit();
});
}
}
});
以下を使用します。
$('input[type="submit"]').on("click", function (e) {
e.preventDefault();
e.stopPropagation();
var form = $(this).closest('#dropzone-form');
if (form.valid() == true) {
if (myDropzone.getQueuedFiles().length > 0) {
myDropzone.processQueue();
} else {
myDropzone.uploadFiles([]); //send empty
}
}
});
キューにファイルがあるかどうかを確認する必要があります。キューが空の場合、直接dropzone.uploadFile（）を呼び出します。この方法では、ファイルを渡す必要があります。 [caniuse] [1]で述べたように、FileコンストラクタはIE/Edgeではサポートされていないため、File APIはそれに基づいているため、Blob APIを使用してください。
Dropzone.uploadFile（）で使用されるformData.append（）メソッドでは、Blobインターフェースを実装するオブジェクトを渡す必要があります。これが、通常のオブジェクトを渡すことができない理由です。
dropzoneバージョン5.2.0には、upload.chunkedオプションが必要です
if (this.dropzone.getQueuedFiles().length === 0) {
var blob = new Blob();
blob.upload = { 'chunked': this.dropzone.defaultOptions.chunking };
this.dropzone.uploadFile(blob);
} else {
this.dropzone.processQueue();
}
状況に応じて、フォームを送信するだけです。
if (myDropzone.getQueuedFiles().length > 0) {
myDropzone.processQueue();
} else {
$("#my_form").submit();
}
私はMatija Grcicの答えを試しましたが、次のエラーが発生しました：
Uncaught TypeError: Cannot read property 'name' of undefined
そして、dropzoneのソースコードを変更したくなかったので、次のようにしました。
if (myDropzone.getQueuedFiles().length > 0) {
myDropzone.processQueue();
} else {
myDropzone.uploadFiles([{name:'nofiles'}]); //send empty
}
注：配列内のオブジェクトをuploadFiles関数に渡します。
次に、サーバー側をチェックします。name！= 'nofiles'がアップロードを行うかどうかを確認します。
最初のアプローチは私にはちょっと高すぎるので、ソースコードに飛び込んで変更したくありません。
もしあなたが私のようになったら、これを使ってください。
function submitMyFormWithData(url)
{
formData = new FormData();
//formData.append('nameOfInputField', $('input[name="nameOfInputField"]').val() );
$.ajax({
url: url,
data: formData,
processData: false,
contentType: false,
type: 'POST',
success: function(data){
alert(data);
}
});
}
そしてあなたのドロップゾーンスクリプトで
$("#submit").on("click", function(e) {
// Make sure that the form isn't actually being sent.
e.preventDefault();
e.stopPropagation();
if (myDropzone.getQueuedFiles().length > 0)
{
myDropzone.processQueue();
} else {
submitMyFormWithData(ajaxURL);
}
});
私は正常に使用しました：
submitButton.addEventListener("click", function () {
if(wrapperThis.files.length){
error = `Please select a file`;
} else {
wrapperThis.processQueue();
}
});