CODEWITHSUNDEEP
phpjqueryajaxxmlhttprequestdropzone.js
Sidius
Sidius

Reputation: 414

Send additional data with dropzone to the backend

I am trying to send through dropzone a specific -already known- position ID of an image file to the backend, which is going to be uploaded on the server. Although the formData.append() is being used, I see that nothing is appended.Instead just this "FormData {}" shows up.

dropzoneObject.on("sending", function(file, xhr, formData){
    var nameOfFile = $(file.previewElement).find(".dz-filename").text();
    var positionOfFile = fpos;
    //console.log("The file who's being sent is named: "+nameOfFile+" and its position id is: "+positionOfFile);
    formData.append("fpos", fpos);
});

I expect to see in example fpos=16;

Upvotes: 3

Views: 9878

Answers (1)

wallek876
wallek876

Reputation: 3259

Don't know about your particular error, but here is a simple example of how to send additional data with dropzone using jQuery and receiving it with php on the backend.

html:

<form id="myForm" class="dropzone"></form>

js:

Dropzone.autoDiscover = false;
$('.dropzone').dropzone ({
        url: "upload.php",
        init: function() {
            this.on("sending", function(file, xhr, formData){
                formData.append("fpos", 777)
            }),
            this.on("success", function(file, xhr){
                alert(file.xhr.response);
            })
        },
});

The success event is only to demonstrate how to access the response send from the server:

php: 

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

The php simply sends back to client the same data received, just to show where is accessible.

Upvotes: 8

Related Questions