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 page as the DropZone after the upload is completed.

the info i want to get in the server response is a direct link to the file.

the website of dropzone: http://www.dropzonejs.com/

my project website:

http://37.34.62.131/test/

so i completed this in a older version of my project but i cant figure it out how to do it with dropzone.js

working example:

http://37.34.62.131/test/uploader%201.0/

what i try to do is when a file has been uploaded i want to get the php response back on the same page with the download links as shown below.

i can also send you my source codes so you can look for yourself.

my php code i want to see in the response:

        print '<h2>Picture Uploaded Successfuly!!!!</h2> <p id="codes">

      <img src="'.$imgurl.'" height="300" alt="Uploaded Picture" >
        <label for="codebb">BBCode:</label>
        <input type="text" id="codebb" value="[URL='.$siteurl.'][IMG]'.$dlurl.'[/IMG][/URL]" onclick="javascript:this.focus();this.select();" readonly="true" /><br />
        <label for="codehtml">HTML Code: </label>
        <input type="text" id="codehtml" value=\'&lt;a href="'.$siteurl.'"&gt;&lt;img src="'.$dlurl.'" alt="'.$alt.'" /&gt;&lt/a&gt;\' onclick="javascript:this.focus();this.select();" readonly="true" /><br />
        <label for="codedirect">Direct Link:</label>
        <input type="text" id="codedirect" value="'.$dlurl.'" onclick="javascript:this.focus();this.select();" readonly="true" /></p>';
        echo ".$newname";

Can anyone help me understand what I'm missing?

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

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 3

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();