How to upload a text value along with dropzone values through jquery,using AJAX?

Question

I have a textarea element,dropdownlist element and a dropzone area in a div.The images,video,pdf files are successfully uploading into uploads folder(no issues).The text area and dropdown values are also successfully getting inserted into database via jquery and ajax file,when submit button is clicked(submit button works on jquery).My requirement is ,how to send dropzone file values through Jquery AJAX(through same jquery AJAX where the text area and drop-down values are sent) on that submit button click event...

The html code :

<div class="panel">

                 <textarea placeholder="Hi!"  class="form-control input-lg p-text-area" name="update" id="update" ></textarea>



              <div class="panel-footer">
                         <ul class="nav nav-pills">
                      <li><select name="selectcategory" id="selectcategory" required>
<option value="">----select category-----</option>
<option value="option1">1</option>
<option value="option2">2</option>
<option value="option3">3</option>
<option value="option4">4</option>

</select></li>
<input type="submit"  value="Update" name="update"  id="u" class="btn btn-info pull-right update_button">



<li> <form action="upload_file.php" class="dropzone">
                                            <div class="fallback">
<input name="file" type="file" multiple />
 </div>
 </form>
  <a href="javascript:void(0)" id="camerabutton" title="Upload Image"><i class=" fa fa-camera"></i></a> 
                      </li>

                  </ul> 

                </div>

        </div>

The jquery code:

      /* Update Button Click */
      $(".update_button").click(function()

    {
       var updateval = $("#update").val();
       var cate=$("#selectcategory").val();
       var dataString = 'update='+updateval+'&Category='+cate;
       if($.trim(updateval).length==0 && $.trim(cate).length==0)
        { 
            alert('ENTER SOME TEXT!!');
         }
        else
            {

           $.ajax({
                    type: "POST",
                     url: $.base_url+"message_ajax.php",
                    data: dataString,
                    cache: false,
                  success: function(html)
         {

            $("#update").val('').focus();

            $("#selectcategory").val('');
          //var c=$('#update_count').html();
         //$('#update_count').html(parseInt(c)+1);

           $(".dropzone").hide();
             }
           });
               }
            return false;
           });

upload_file.php

<?php
  $ds          = DIRECTORY_SEPARATOR;  //1

       $storeFolder = 'uploads';   //2

    if (!empty($_FILES)) {

$tempFile = $_FILES['file']['tmp_name'];          //3             

$targetPath = dirname( __FILE__ ) . $ds. $storeFolder . $ds;  //4

$targetFile =  $targetPath. $_FILES['file']['name'];  //5

move_uploaded_file($tempFile,$targetFile); //6

     }
  ?>  

The dropzone file i use:

dropzone-amd-module.js

Answer 1

If someone need!
I also needed to pass extra value from select box and this solution worked for me (i do not use form here):

Dropzone.options.myDropzone = {

        url: "upload.php",        

        autoProcessQueue: true,
        width: 300,
        height: 300, 
        maxFilesize: 30,
        progressBarWidth: '100%',   

        init: function () {

            this.on("sending",function(file,xhr,data){
                data.append("fileCategory",$('#fileCategory').val());
            });

            this.on("complete", function (file) {
                //some action here
            });
        }

};

fileCategory work as $_POST

Answer 2

Use params. http://www.dropzonejs.com/#params

Dropzone.options.dropzoneBox = {
        url: 'url here',
        params: {
            new_value: 'value'
        },
        init: function(){
            this.on('success', function (data, xhr) {
                console.log(data, xhr);
            });
};