My problem is that I must combine a normal form with dropzone.js for a drag&drop upload. After the user clicks the submit-button, then a ajax-request send the data to a php-script if there are values in the inputs.

But how I can combine the files by dropzone and the ajax-request? I would send both, when the user clicks the button. If I drag a file in the zone than the file will be send.

autoProcessQueue: false

This make it, that the file doesn't will be send if the user drag a file in the zone.

Solution needed: User fills the form, drag a file in the zone and if the user click on the button, then the values and files will be send with a ajax-request.

Some demo for the code: /

My problem is that I must combine a normal form with dropzone.js for a drag&drop upload. After the user clicks the submit-button, then a ajax-request send the data to a php-script if there are values in the inputs.

But how I can combine the files by dropzone and the ajax-request? I would send both, when the user clicks the button. If I drag a file in the zone than the file will be send.

autoProcessQueue: false

This make it, that the file doesn't will be send if the user drag a file in the zone.

Solution needed: User fills the form, drag a file in the zone and if the user click on the button, then the values and files will be send with a ajax-request.

Some demo for the code: http://jsfiddle.net/wQP5B/

• javascript
• php
• ajax
• forms
• dropzone.js

• did you read dropzonejs.com under usage. "The typical way of using dropzone is by creating a form element with the class dropzone" That's it. Dropzone will find all form elements with the class dropzone, automatically attach itself to it, and upload files dropped into it to the specified action attribute. The uploaded files can be handled just as if there would have been a html input like this: – wayne Commented Mar 6, 2014 at 8:15

1 Answer 1

I also had the same problem but i solved it. You can checkout this link from dropzone --> https://github.com/enyo/dropzone/wiki/Combine-normal-form-with-Dropzone

They have given what you want BUT there are some things to be added in what they have given like not making the whole form clickable and other things . The code below works fine for me

form.html

<form method="post" action="upload.php" class="dropzone" id="mydropzone" enctype='multipart/form-data'> //remember we gave an id mydropzone to the form         
    <label>Username:<input type="text" name="uname"/> </label>
    <label>Password:<input type="text" name="pass"/> </label>
    //this will the dropzone drag and drop section.
    //notice we have given it an id dropzonePreview.
    <div id="dropzonePreview"></div>
    <input type="button" id="sbmtbtn" value="submit"/>
    //we have given id sbmtbtn to the button   
</form>
<script>
    Dropzone.options.mydropzone = {
    //url does not has to be written 
    //if we have wrote action in the form 
    //tag but i have mentioned here just for convenience sake 
        url: 'upload.php', 
        addRemoveLinks: true,
        autoProcessQueue: false, // this is important as you dont want form to be submitted unless you have clicked the submit button
        autoDiscover: false,
        paramName: 'pic', // this is optional Like this one will get accessed in php by writing $_FILE['pic'] // if you dont specify it then bydefault it taked 'file' as paramName eg: $_FILE['file'] 
        previewsContainer: '#dropzonePreview', // we specify on which div id we must show the files
        clickable: false, // this tells that the dropzone will not be clickable . we have to do it because v dont want the whole form to be clickable 
        accept: function(file, done) {
            console.log("uploaded");
            done();
        },
        error: function(file, msg){
            alert(msg);
        },
        init: function() {
            var myDropzone = this;
            //now we will submit the form when the button is clicked
            $("#sbmtbtn").on('click',function(e) {
               e.preventDefault();
               myDropzone.processQueue(); // this will submit your form to the specified action path
              // after this, your whole form will get submitted with all the inputs + your files and the php code will remain as usual 
        //REMEMBER you DON'T have to call ajax or anything by yourself, dropzone will take care of that
            });      
        } // init end
    };
</script>

NOTE : YOU DONT have to do any fancy stuff in the php file . Just write what you would normally write in PHP to upload files and input .

See if this works for you.