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. Sample:

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

Answer 4

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 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

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