CODEWITHSUNDEEP
javascriptphpjquerydropzone.js
RAJ
RAJ

Reputation: 229

How to submit the hidden input fields also along with file in dropzone.js

I am a newbie to this dropzone.js I have a doubt that how could submit hidden input field values along with the file. this is my code that I have tried help guide me if I am going wrong some where.

HTML and php code:

<?php for($i=0; $i= const; $i++){?>
<form id="upload1" method="post" enctype="multipart/form-data">
  <input type="hidden" id="key" name="key" value="<?php echo $key;?>">
  <div id="dZUpload-<?php echo $i?>" class="dropzone dZUpload">
    <div class="dz-default dz-message"></div>
    <button type="button" class="btn btn-primary pull-right submit_files" id="<?php echo $key;?>">Submit this form!</button>
  </div>
</form>
<?php } ?>
<input type="hidden" id="testkey" value=""/>

and this is my javacript code:

for (var i = 1; i <= $('.dropzone').length; i++) {
$("#dZUpload-"+i).dropzone({
  url: "<?php echo site_url('uploadfiles.html');?>",
  paramName: "file",
  maxFilesize: 2,
  autoProcessQueue: false,
  addRemoveLinks: true,
  uploadMultiple: true,
  parallelUploads: 100,
  maxFiles: 100,
  init: function() {          
     var myDropzone = this; // closure 
     $(".submit_files").off().on("click", function(e) {
             var key = $(this).attr('id');
             e.preventDefault();
             e.stopPropagation();
             myDropzone.on("sending", function(file, xhr, formData) {                      
               formData.append("key_campiagn", key); 
             });
             myDropzone.processQueue(); 
           });    
          },
  success: function (file, response) {
    var imgName = response;
    file.previewElement.classList.add("dz-success");
  },
  addfiles: function (file) {
    alert(file);
  },
  error: function (file, response) {
    file.previewElement.classList.add("dz-error");
  }
});
}
}

I want the submit the btn_id value along with the file. I stuck up how to submit these values together to the specified url. Can anyone help me out with this.

Upvotes: 3

Views: 9197

Answers (2)

S&#233;bastien Gicquel
S&#233;bastien Gicquel

Reputation: 4386

According to the documentation :

Dropzone will submit any hidden fields you have in your dropzone form. So this is an easy way to submit additional data. You can also use the params option.

source : http://www.dropzonejs.com/#tips

So it is possible to do it like this :

<form action="/" method="post" class="dropzone" id="my-awesome-dropzone">

     <input type="hidden" value="xxx" name="nom_prenom">

     <input type="hidden" value="yyy" name="product_name">

</form>

and in your PHP file :

$nom_prenom = $_POST["nom_prenom"];
$product_name = $_POST["product_name"];

Upvotes: 0

Muhammad Usman
Muhammad Usman

Reputation: 1362

you can add extra values in your init function before uploading some thing like this

init: function() {
    this.on("sending", function(file, xhr, formData) {
       var value = $('form#upload1 #key').val();
       formData.append("key", value); // Append all the additional input data of your form here!
    });
}

Upvotes: 5

Related Questions