Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make DropzoneJS image field as optional field in my form

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();
});
}
like image 253
Bips Avatar asked Nov 02 '25 07:11

Bips


1 Answers

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.

like image 154
Saeid Avatar answered Nov 03 '25 21:11

Saeid