CODEWITHSUNDEEP
javascripthtmldropzone.js
Lubomir Borisov
Lubomir Borisov

Reputation: 168

Dropzone show modal on sending and add additional data to the POST

I use dropzone to style a little bit my form which at the current moment is used only to upload files. Now I need to add some additional data to each of the files. I saw several similar issues here but I couldnt figure it out. So what I want to do is when I drop a file into the dropzone to appear a modal window with select options for addtional data taken from the database. So i need the event before send (sending) to pause the upload , then to enter the data and then to continue the upload. I stuck here. Html:

<div class="tab-pane fade active in" id="uploadtab">

<form id="myDropzone" action="/routes/upload" class="dropzone" enctype="multipart/form-data"></form>  

</div>

<!-- Modal -->
    <div class="modal hide fade in" id="myModal" style="display: none;">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>
        <h3>Modal header</h3>
    </div>
    <div class="modal-body">
        <p>One fine body…</p>
      </div>
      <div class="modal-footer">
          <a href="#" class="btn">Close</a>
          <a href="#" class="btn btn-primary" id="savebtn">Save changes</a>
    </div>
    </div>

    <div id="response"> 
     </div>

Javascript:

<script type="text/javascript">
Dropzone.options.myDropzone = {
    autoProcessQueue: true,
    init: function() {
        var submitButton = document.querySelector("#savebtn");
        //var myDropzone = this; //closure
        submitButton.addEventListener("click", function() {

            this.processQueue();
        });

        this.on("sending", function(test) {
            $('#myModal').modal('show');
        });

        var submitButton = document.querySelector("#submit-all");
        this.on("success", function(file, response) {
            $("#response").append(response);

        });
    }
};
 </script>

I pass the file to a zend action named upload and there I do several things with the info from the file but this doesnt matter. Now the problem really is that I dont know how to pause the upload. If i set "autoProcessQueue: true," to false then nothing happens on the events.

EDIT 1: Ok ,it turned out that I need to user another event to show the modal form.

            this.on("addedfile", function(file) {
            $('#myModal').modal('show');              
        });

Now its showing but when i click on the button nothings happens. How to start ProccessQueue on button click ?

Upvotes: 0

Views: 1616

Answers (1)

Bo Pennings
Bo Pennings

Reputation: 985

You can add the autoProcessQueue call to start the uploading like this:

myDropzone.processQueue()

To switch off automatic upload you can change your autoProcessQueue setting to false.

Upvotes: 0

Related Questions