Trouble With Dropzone.js File Upload

I'm using for the first time dropzone.js inside another form...so as two forms can't be nested, I removed dropzone's form: html snippet:

Solution 1:

The 'error' => int 4 means that no file has been uploaded, i think this is because you are submitting the form like if it was a regular form, if you want to include dropzone inside a regular form i don't think you can submit the form the regular way and attach to it the files dropped in the dropzone element, or at least there is no simple way to do it, one solution could be to encode the file in base64 and then add the encoded string to an input to send.

But an easy one I think is to send the form using dropzone and append the input values to the request using javascript, here generic example.

html:

<form id="addproduct">
    <label>Input 1: </label>
    <input type="text" name="input1">
    <label>Input 2: </label>
    <input type="text" name="input2">
    <div id="myAwesomeDropzone" class="dropzone"></div>
</form>
<button type="button" id="submit_form">Submit</button>

js:

Dropzone.options.myAwesomeDropzone = {
    url: 'receiveAddForm',
    autoProcessQueue: false,
    uploadMultiple: true,
    parallelUploads: 3,
    maxFiles: 3,
    init: function () {
        var myDropzone = this;
        $('#submit_form').on("click", function() {
            myDropzone.processQueue();
        });
        this.on("sending", function(file, xhr, formData){
            $('#addproduct').find('input').each(function() {
                formData.append( $(this).attr('name'), $(this).val() );
            });
        });
        this.on("success", function(file, response) {
            console.log(response);
        });
        this.on("completemultiple", function(files) {
            // Here goes what you want to do when the upload is done
            // Redirect, reload , load content ......
        });
    },

};

receiveAddForm (php):

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') 
{
    echo "RECEIVED ON SERVER: \n";
    print_r($_FILES);
    print_r($_POST);
}

The server file just prints the data received on the server, so you can see it in browsers console. I omitted bootstrap classes and elements only to show the relevant part, but you cand add them no problem.

Solution 2:

to have a dropzone inside another form you can put a div in the form with class="dropzone" and convert it to dropzone element like this:

Dropzone.autoDiscover = false;

var myDropzone = new Dropzone("#my-awesome-dropzone", {
  autoProcessQueue: false,
  url: "receiveAddForm",
  // other options
});

then you can call the events like this:

myDropzone.on("addedfile", function(file) {
  console.log("File added:", file.name);
});

jsfiddle with your form : fiddle

Share