How to get Dropzone.js to upload files only when a submit button is clicked?

Question

for the past few days I've been trying to implement Dropzone into my form, but so far I had no luck figuring out how to make it upload and process the images only when the submit button gets clicked. Therefore, I decided to come here and ask you guys for help.
I've made a example code structure so you can only take a look at what its necessary. Right now, I think its should work the way when I put some pictures into the Dropzone and click the button it triggers the collect_input function from the controller. But I have no clue how to process the files,etc. So, I guess what I'm asking for is a tip/solution on how to process the files from the form e.g.. Saving them to a folder and adding an entry to a database.
I'm gonna post the code below and if any of you have any tips or solutions please share them with me. I'd like to thank you all in advance for even reading this and for your replies. Btw I'm working in CodeIgniter.
[Download the whole project (css,js & php] http://puu.sh/5eqLc.zip

htdocs/application/controllers/test.php

<?php
class Test extends CI_Controller {

    public function __construct() {

        parent::__construct();


    }

    public function index() {

        $this->load->view('test_view');

    }

    public function collect_input() {
    }
}

htdocs/application/controllers/test_view.php

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <meta charset="utf=8">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>                      

            <!--    Load DropZone        -->
            <link href="<?php echo base_url(); ?>/css/basic.css" type="text/css" rel="stylesheet" />
            <link href="<?php echo base_url(); ?>/css/dropzone.css" type="text/css" rel="stylesheet" />
            <script src="<?php echo base_url(); ?>js/dropzone.min.js"></script>
            <script type="text/javascript">
                jQuery(document).ready(function() 
                {
                    var myDropzone = new Dropzone("div#myId", { url: "file-upload"});
                });
            </script>
            <script type="text/javascript">
            Dropzone.options.myId = {

              // Prevents Dropzone from uploading dropped files immediately
              autoProcessQueue: false,

              init: function() {
                var submitButton = document.querySelector("#add")
                    myDropzone = this; // closure

                submitButton.addEventListener("click", function() {
                  myDropzone.processQueue(); // Tell Dropzone to process all queued files.
                });

                // You might want to show the submit button only when 
                // files are dropped here:
                this.on("addedfile", function() {
                  // Show submit button here and/or inform user to click it.
                });         
              }
            };
            </script>
        </head>
        <body>

            <?php echo form_open('test/collect_input'); ?>

                <!-- One of the many inputs of my form -->
                <select id="list_type">
                   <option value="-1">Chooose a type</option>

                   <option value="1">&gt;&gt;Type A</option>
                   <option value="2">&gt;&gt;Type B</option>
                </select>

                <!--        Dropzone         -->
                <div id="myId" class="dropzone"></div>  

                <!-- Submit button-->
                <input type="submit" id="add" name="add" value="Add!!">
        </form>
    </body>
</html>

Seems like you're using a form as well as a jQuery solution. http://www.dropzonejs.com/#toc_4 states the url has to be set to work. How about changing the url in the jQuery part? From this: `var myDropzone = new Dropzone("div#myId", { url: "file-upload"});` to `var myDropzone = new Dropzone("div#myId", { url: ""}); ` — Wietse, Nov 11 '13 at 16:01
I'm unclear on your question. Is Dropzone not working as you expected (ie: uploading automatically, etc) or are you trying to figure out how to process the files on the server side once the form is submitted? — greydnls, Nov 27 '13 at 03:18
have u read [Combine-normal-form-with-Dropzone](https://github.com/enyo/dropzone/wiki/Combine-normal-form-with-Dropzone) ? — Amin Adha, Nov 28 '13 at 22:03

Nouphal.M · Answer 1 · 2016-01-20T10:40:43.293

25

You can supply your own url to upload the file. Currently I am just setting it as 'someurl'

Dropzone.autoDiscover = false;
jQuery(document).ready(function() {
  var myDropzone = new Dropzone("#myId", { 
    url: 'someurl',
    autoProcessQueue:false
  });

  $('#add').on('click',function(e){
    e.preventDefault();
    myDropzone.processQueue();  
  });   
});

edited Jan 20 '16 at 10:40

answered Dec 08 '13 at 07:37

Nouphal.M

6,304
1
17
28

score 4 · Answer 2 · answered Jun 28 '17 at 20:34

4

<script>
$(document).ready(function () {
    Dropzone.options.dropzoneForm = {
        autoProcessQueue: false
    };
});

function processEvent() { // call this to trigger the upload
    $('#dropzoneForm').get(0).dropzone.processQueue();
}
</script>

<form action="/your-post-url-here" method="post" enctype="multipart/form-data" class="dropzone" id="dropzoneForm"></form>

answered Jun 28 '17 at 20:34

Wagner Danda da Silva Filho

4,958
9
39
49

what is the `$('#dropzoneForm').get(0).dropzone.processQueue();` get parameter for ? – Akshay Shrivastav Oct 17 '17 at 11:04
1

@AkshayShrivastav that is to trigger the upload. – Wagner Danda da Silva Filho Oct 18 '17 at 17:12

How to get Dropzone.js to upload files only when a submit button is clicked?

2 Answers2

Linked