use dropzone without auto uploading

Question

I want to use drop zone drag and drop multiple file up-loader. the thing it does is automatically uploads file to server using Ajax. But I want it to perform another function. I want that whenever I select a file it should create a <input type="file" name="file1"><input type="file" name="file2"> and so on with every field holding that file. so , when at the end i click on submit button. then I should be able to upload it manually.

---

The scenario is that i am going to upload products. by drag and drop i will be uploading pictures of the products. I know this picture can be uploaded and values can be saved to database but, for the time i have not submitted the form there is no product id yet. and there is field in images tab where we enter the product id. any suggestion to achieve this.

Solution

You should set autoProcessQueue parameter to false.

You can do this way :

HTML - Add button

<form action="your_action" class="dropzone" id="your_form_id">
     <div class="fallback">
         <input name="file" type="file" />
     </div>
</form>

<button type="button" id="btn_upload">Upload</button>

JavaScript - set autoProcessQueue to false, add click event on the button ID and fire the processQueue event to upload the file

Dropzone.options.your_form_id = {
    autoProcessQueue: false,

    init: function (e) {

        var myDropzone = this;

        $('#btn_upload').on("click", function() {
            myDropzone.processQueue(); // Tell Dropzone to process all queued files.
        });

        // Event to send your custom data to your server
        myDropzone.on("sending", function(file, xhr, data) {

            // First param is the variable name used server side
            // Second param is the value, you can add what you what
            // Here I added an input value
            data.append("your_variable", $('#your_input').val());
        });

    }
};