I am using dropzoneJS in my form. Beside image, the form also records user inputs. Everything is working fine. User inputs are going in my database and images are uploading in the defined directory. Now I want to make drag-n-drop image field as optional field where user may either choose to upload image or may leave it blank. But the problem is, the "submit" button is not working until user drop images. So please suggest me how to make submit button to submit the form even if user do not choose any image. I am not expert in javascript.
here is my form and button-
<form action="<?php echo $_SERVER["PHP_SELF"]; ?>" class="dropzone form-horizontal" id="my-awesome-dropzone" method="post" enctype="multipart/form-data">
<input type="text" ..blah blah
<input type .. blah blah
<!-- DropzoneJS div -->
<div class="dropzone-previews form-group" style="height: 350px;"></div>
<div class="fallback col-xs-3">
<input name="file" class="input-file form-control "type="file" multiple/>
</div>
<button type="submit" id="submit-dz" class="btn btn-primary" name="signup">Submit</button>
And this is javascript (after setting necessary dropzone configuration, e.g. autoProcessQueue: false and blah..blah) -
init: function() {
var myDropzone = this;
// Upload images when submit button is clicked.
$("#submit-dz").click(function (e) {
e.preventDefault();
e.stopPropagation();
myDropzone.processQueue();
});
}
you can check if dropzone have files to upload or not and submit the form accordingly:
init: function() {
var myDropzone = this;
$("#submit-dz").click(function (e) {
e.preventDefault();
e.stopPropagation();
if (myDropzone.files.length) {
myDropzone.processQueue(); // upload files and submit the form
} else {
$('#my-awesome-dropzone').submit(); // submit the form
}
});
}
also reading this might help you.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With