How to get the Dropzone.js return value?
Question
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>
7 answers
solution1
24 ACCPTED 2014-10-17 09:24:20
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);
});
solution2
13 2016-02-05 13:00:02
$("#dropzoneForm").dropzone({
maxFiles: 2000,
url: "../Uploader/HttpUploadHandler.ashx?param=" + result.prjID,
success: function(file, response){
//alert("Test1");
}
});
solution3
9 2014-10-24 18:33:48
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
solution4
3 2016-09-17 07:18:15
Try this:
Dropzone.options.myAwesomeDropzone = {
success: function(file, response){
//alert(response);
console.log(response);
}
};
solution5
1 2016-09-25 09:41:03
It works for me
$(function() {
var myDropzone = new Dropzone(".dropzone");
myDropzone.on("success", function() {
alert('Uploaded!');
});
});
solution6
0 2017-05-11 15:27:00
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() .
solution7
0 2018-03-19 11:13:09
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:
if (allFinished) {
_this14.options.chunksUploaded(file, function () {
_this14._finished(files, '', null);
});
}
So retrieving the response doesn't seem to be supported for chunked uploads.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.