How to get the Dropzone.js return value?

Asked 17/10, 2014 at 9:15 Answered 19/3, 2018 at 11:13

Solved javascript html file-upload dropzone.js

I just implemented Dropzone.js to make file uploads on my website easier. The file uploads fine, and after it finished uploading I give the file an id and return this id to the browser.

This works fine, except for that I don't know how to catch the id that gets returned from the server. In this SO answer I found some code that should supposedly do that, but it doesn't work for me. The code I have now is pasted below.

Does anybody know how I can get the value that is returned by the server? All tips are welcome!

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="/static/js/external/dropzone.min.js"></script>
    <link href="/static/css/external/dropzone.css" rel="stylesheet">

<script type="text/javascript">
    $(function() {

        Dropzone.options.uiDZResume = {
            success: function(file, response){
                console.log('WE NEVER REACH THIS POINT.');
                alert(response);
            }
        };
    });
</script>

</head>
<body>
<form action="/doc"
      class="dropzone"
      id="my-awesome-dropzone"></form>
</body>
</html>

Sweetbrier answered 17/10, 2014 at 9:15 Comment(0)

Looking at the source code of dropzone.js, it seems that there is a lot of events you can listen to.

events: [
  "drop"
  "dragstart"
  "dragend"
  "dragenter"
  "dragover"
  "dragleave"
  "addedfile"
  "removedfile"
  "thumbnail"
  "error"
  "errormultiple"
  "processing"
  "processingmultiple"
  "uploadprogress"
  "totaluploadprogress"
  "sending"
  "sendingmultiple"
  "success"
  "successmultiple"
  "canceled"
  "canceledmultiple"
  "complete"
  "completemultiple"
  "reset"
  "maxfilesexceeded"
  "maxfilesreached"
]

Here the "success" event seems to be appropriate.

A good starting point would be to bind an event listener to your dropzone and see what data you get on such event.

$('#my-awesome-dropzone').on('success', function() {
  var args = Array.prototype.slice.call(arguments);

  // Look at the output in you browser console, if there is something interesting
  console.log(args);
});

Bearnard answered 17/10, 2014 at 9:24 Comment(7)

Alright, thanks for that! Would you possibly have a little example code of how I might do that (my js skills aren't up to par with my php and Python skills)? – Sweetbrier 17/10, 2014 at 9:26

I tried this (including the #my-awesome-dropzone), but it doesn't work. The function simply never gets called. I tried binding to other events, such as "drop" (which works), "dragenter" (also works), "success" (doesn't work), "complete" (also doesn't work) and "addedfile" (also doesn't work). Would you have any idea why some are called and others not? – Sweetbrier 17/10, 2014 at 9:48

Due to the nature of the events that aren't working, I think there could be something wrong on the server side maybe. "drop" and "dragenter" are fully UI related events, while "success", "complete" and "addedfile" have something to do with the server side. – Bearnard 17/10, 2014 at 12:16

@lechariotdor Nice one. Very nice thinking. – Jamboree 9/6, 2015 at 12:44

Great! This row has finished my work : var args = Array.prototype.slice.call(arguments); – Threequarter 18/1, 2016 at 21:57

What is the 'arguments' variable? Where does it come from? I'm refering to the line var args = Array.prototype.slice.call(arguments); – Konstance 2/12, 2017 at 17:42

@Konstance The arguments object is an implicit local variable available within all (non-arrow) functions. It is useful when you don't know how many arguments to expect in a function, as you can (almost) use it like an array. More info on MDN - Arguments object. – Bearnard 8/12, 2017 at 3:6

$("#dropzoneForm").dropzone({
    maxFiles: 2000,
    url: "../Uploader/HttpUploadHandler.ashx?param=" + result.prjID,
    success: function(file, response){
        //alert("Test1");
    }
});

Olibanum answered 5/2, 2016 at 13:0 Comment(0)

Does this help?

Dropzone.options.myDropzone = {
  init: function() {
        thisDropzone = this;
        this.on("success", function(file, responseText) {
            var responseText = file.id // or however you would point to your assigned file ID here;
            console.log(responseText); // console should show the ID you pointed to
            // do stuff with file.id ...
        });
    }
};

For example, I have mine set up to attach the server path to the image name and pass this as a value into a form field on submit. As long as you define responseText to point to the file ID you should get a return on this.

This link might be helpful as well: https://github.com/enyo/dropzone/issues/244

Carthusian answered 24/10, 2014 at 18:33 Comment(3)

This was helpful! For the sake of ultra clarity I would like to mention that 'myDropzone' must be the camel-case version of your form's id. – Sinuous 16/1, 2015 at 8:49

this not works for me. Dropzone.options.myDropzone = { init: function() { this.on("success", function(file, responseText) { console.log(responseText); // console should show the ID you pointed to // do stuff with file.id ... }); } }; – Lindyline 28/4, 2017 at 11:41

You're replying to a solution offered almost 3 years ago. It may be you have a different version of Dropzone than mine, or that your instance is not called "myDropzone" or any one of a number of things. Without posting your code, nobody can help you and your comment is not constructive. – Carthusian 29/4, 2017 at 0:12

Try this:

Dropzone.options.myAwesomeDropzone = {
    success: function(file, response){
        //alert(response);
        console.log(response);
    }
};

Homologous answered 17/9, 2016 at 7:18 Comment(0)

It works for me

$(function() {
    var myDropzone = new Dropzone(".dropzone");
    myDropzone.on("success", function() {
        alert('Uploaded!');
    });
});

Zonnya answered 25/9, 2016 at 9:41 Comment(0)

I am using jQuery and this is what worked for me:

var dz = $(".my-awesome-dropzone").dropzone()[0];
dz.dropzone.on("success", function (file, response) { ... }));

Note that the dropzone() method adds an dropzone attribute to the DOM object. You have to call on() on that object - not the jQuery on().

Pluvial answered 11/5, 2017 at 15:27 Comment(0)

I wanted to add this as a comment, but I can't, since I have a low reputation.

For those of you who still have trouble retrieving the response from the server, if you're using chunking, Dropzone is hard-coding a blank response in this situation:

https://github.com/enyo/dropzone/blob/caf200c13fd3608dd6bed122926d5848927f55b4/dist/dropzone.js#L2344

if (allFinished) {
    _this14.options.chunksUploaded(file, function () {
        _this14._finished(files, '', null);
     });
}

So retrieving the response doesn't seem to be supported for chunked uploads.

Dosi answered 19/3, 2018 at 11:13 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags