DropzoneJS: How to get PHP response after upload success?

Question

I\'m trying to implement Dropzone on my site. I want to listen for the \"success\" event and then take the server response and add some info from it to a form on the same pa

Answer 1

Looking at your website, seems like you were able to fix the problem.

Anyways this is for someone who might still be looking. You need to add the function success with two parameters. The first param returned is always file, second one is the response.

One of the other answers had this, but this response did not initially include it. It's important to set the autoDiscover to false, or this example (as provided in the docs) does not work. Tested on Chrome/IE/Edge on Win10.

Sample:

Dropzone.autoDiscover = false;

$(function() {
        Dropzone.options.uiDZResume = {
            success: function(file, response){
                alert(response);
            }
        };
    });

Answer 2

None of the above worked for me, but this ...

<script>

    Dropzone.autoDiscover = false;
$(function(){

    uploader = new Dropzone(".dropzone",{
        url: "http://locahost/upload",
        paramName : "uploadedFiles",
        uploadMultiple :false,
        acceptedFiles : "image/*,video/*,audio/*",
        addRemoveLinks: true,
        forceFallback: false,
        maxFilesize:1000,
        parallelUploads: 100,

    });//end drop zone

  uploader.on("success", function(file,response) {
   console.log(response)
  });



});//end jq
</script>

Answer 3

But if I am using this code then i have to remove the dropzone class from form. Otherwise it will throw this error.

throw new Error("Dropzone already attached.");
---------------------------------------------
new Dropzone("#myDropzone", { 
    maxFilesize: 2, // MB
    init: function() {
        this.on("success", function(file, responseText) {
            console.log(responseText);
        });
    }
});

Answer 4

I had have some problems with dropzone, but i found this solution:

new Dropzone("#myDropzone", { 
    maxFilesize: 2, // MB
    init: function() {
        this.on("success", function(file, responseText) {
            console.log(responseText);
        });
    }
});

Answer 5

Note that there is an issue with chunked uploads and never get back the response from the server on success. All the previous answers will not work in that case. Solution could be by manually parsing XHR response like so:

const galleryZone = new Dropzone(".dropzone-gallery", {
    url: your_upload_url_in_here,
    chunking: true,
    forceChunking: true,
    chunkSize: 2000000,
    success: (file, response) => {
        console.log(JSON.parse(file.xhr.response));
    }
});

Alse you could check the issue at Dropzone's repository in here https://gitlab.com/meno/dropzone/issues/51#note_47553173

Answer 6

The valided answer not worked for me. This does :

$(".mydrop").dropzone({ 
    url: upload_url, 
    success : function(file, response){
        console.log(file);
        console.log(response);
    }
});

And in the php side:

echo json_encode($whateverouwant);
die();