javascript - 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.

Answer 1

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());
        });

    }
};