14

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>
Community
  • 1
  • 1
kramer65
  • 50,427
  • 120
  • 308
  • 488

7 Answers7

29

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);
});
tomaoq
  • 3,028
  • 2
  • 18
  • 25
  • 1
    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)? – kramer65 Oct 17 '14 at 09:26
  • 1
    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? – kramer65 Oct 17 '14 at 09: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. – tomaoq Oct 17 '14 at 12:16
  • @lechariotdor Nice one. Very nice thinking. – stratis Jun 09 '15 at 12:44
  • Great! This row has finished my work : var args = Array.prototype.slice.call(arguments); – ozgunb Jan 18 '16 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);` – Gaboik1 Dec 02 '17 at 17:42
  • 1
    @Gaboik1 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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments). – tomaoq Dec 08 '17 at 03:06
13
$("#dropzoneForm").dropzone({
    maxFiles: 2000,
    url: "../Uploader/HttpUploadHandler.ashx?param=" + result.prjID,
    success: function(file, response){
        //alert("Test1");
    }
});
Daniel Beck
  • 20,653
  • 5
  • 38
  • 53
Rohit Dodiya
  • 261
  • 3
  • 4
10

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

code-sushi
  • 719
  • 3
  • 7
  • 23
  • 1
    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. – limeandcoconut Jan 16 '15 at 08: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 ... }); } }; – Alp Altunel Apr 28 '17 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. – code-sushi Apr 29 '17 at 00:12
3

Try this:

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

It works for me

$(function() {
    var myDropzone = new Dropzone(".dropzone");
    myDropzone.on("success", function() {
        alert('Uploaded!');
    });
});
Jhonny Jr.
  • 363
  • 3
  • 4
  • 15
1

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

andy
  • 1,035
  • 1
  • 13
  • 35
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.

Ovidiu
  • 131
  • 1
  • 11