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?

Ushas

Don't print/echo multi-line output. It's hideous for maintenance and legibility. Break out of PHP mode (?>) and dump it out as plain text, or at least use a HEREDOC. Either way relieves of the tedium of having to manually escape any quotes within the text. – Parasitic

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

Drumlin

that response variable seems to be text. I am trying to output JSON from the server. How can I change the type of var it expects to JSON? – Shiah

Bear in mind that if you are loading multiple files this will get called once for each! You must use: successmultiple: function(file. response){} – Cristoforo

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

Claytonclaytonia

The second parameter responseText is always undefined now. – Sprout

responseText has to be defined by you. For example, I have mine set up with a little jQuery to show the full path to the image file and then transfer that to a form input field. – Townsley

the responseText is the info come back from the service that you are using. In my case i return a json with the files names. – Claytonclaytonia

Braian Mellor... I can't get mine to output JSON, only as straight text. Did you change anything in the output of that responseText to make it understand it is JSON? – Shiah

@Shiah if you are working in php on server side, you need to set the header to json, or you can do it in js with JSON.parse(jsonString); – Claytonclaytonia

I lost the upvote on your comment but @BraianMellor you solved the riddle. When I do it all the time in JSON I define the fileType as JSON so don't have to do it anywhere else. This was the first time I was pulling from a non JSON call. Thanks! – Shiah

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

Meng

This answer worked for me, with a little tweaking. Thanks. Saved me a lot of time. :) – Strohl

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>

Camm

Yes, will be worked after set Dropzone.autoDiscover = false; – Ferule

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

Milurd

Thank you, this is exactly why the other answers didn't work for me, as I am using chunked uploads. – Sapir

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

Trattoria

It's because Dropzone is automaticly attached, you can disable this behaviour with Dropzone.autoDiscover = false; – Meng