[英]How to re-enable submit button of file upload after validation error with dropzone.js?
上傳文件時,我有一個額外的必填輸入字段,名為“title”。 用戶將插入一個文件和標題。 如果用戶沒有輸入文件或標題,它會在點擊提交后拋出錯誤。
問題是當我提交一個沒有標題的文件時,得到錯誤,然后返回輸入所需的標題字段,我無法再通過單擊“提交”再次上傳相同的文件。
html
<input type="text" name="title" id="title" placeholder="enter post title" autocomplete="off" />
dropzone.js
// Get the template HTML and remove it from the doumenthe template HTML and remove it from the doument
var previewNode = document.querySelector("#template");
previewNode.id = "";
var previewTemplate = previewNode.parentNode.innerHTML;
previewNode.parentNode.removeChild(previewNode);
var myDropzone = new Dropzone(".container", { // Make the whole body a dropzone
url: "/images-save", // Set the url
thumbnailWidth: 80,
thumbnailHeight: 80,
parallelUploads: 20,
previewTemplate: previewTemplate,
maxFilesize: 255,
maxFiles: 1,
autoQueue: false, // Make sure the files aren't queued until manually added
previewsContainer: "#previews", // Define the container to display the previews
clickable: ".fileinput-button", // Define the element that should be used as click trigger to select files.
acceptedFiles: ".png,.jpg,.gif,.jpeg",
});
myDropzone.on("addedfile", function(file) {
// Hookup the start button
file.previewElement.querySelector(".start").onclick = function() { myDropzone.enqueueFile(file); };
while (this.files.length > this.options.maxFiles) {
this.removeFile(this.files[0]);
}
});
myDropzone.on("sending", function(file, xhr, formData) {
formData.append('_token', $('meta[name="csrf-token"]').attr('content'));
formData.append("title", $('#title').val());
});
根據文檔,可以使用“錯誤”回調...
myDropzone.on("error", function (file, error, xhr) {});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.