I have dropzone form in the Dom with some event handlers. However, none of the events getting fired on action. Files are being sent to the server just fine. I'm just trying to get the response message from the server so that I can add the link of the image to the database
html:
<div>
<form action="/file/upload" class="dropzone" id="dropzoneForm" method="post"></form>
</div>
script:
$(function () {
Dropzone.autoDiscover = true;
Dropzone.options.dropzoneForm = {
init: function () {
this.on("success", function(response) {
alert('Success event fired! Check console');
console.log(response);
});
},
paramName: "file"
};
});
I have dropzone form in the Dom with some event handlers. However, none of the events getting fired on action. Files are being sent to the server just fine. I'm just trying to get the response message from the server so that I can add the link of the image to the database
html:
<div>
<form action="/file/upload" class="dropzone" id="dropzoneForm" method="post"></form>
</div>
script:
$(function () {
Dropzone.autoDiscover = true;
Dropzone.options.dropzoneForm = {
init: function () {
this.on("success", function(response) {
alert('Success event fired! Check console');
console.log(response);
});
},
paramName: "file"
};
});
- You don't have any elements in your form, so I suspect it does not have any size to detect the events. Try adding the file input, use dropzone on a parent div styled to some size for the drop area. – Steve Pallen Commented Apr 16, 2017 at 6:15
- I tried adding the following element inside the form <input type="file" name="file" multiple="multiple"> still not working – s.n Commented Apr 16, 2017 at 6:23
- dropzonejs. follow the documentation you. – Rahman Qaiser Commented Apr 16, 2017 at 6:31
-
Have you tried logging the
dragoveranddragenterevents? – Steve Pallen Commented Apr 16, 2017 at 6:31 - its working now)) see the answer below – s.n Commented Apr 16, 2017 at 7:03
1 Answer
Reset to default 14After some time I figured out the issue. For some reasons the Dropzone.options was not firing because it was inside of the $(function{}). So here is the version that works like a charm
<!DOCTYPE html>
<html lang="en"
<head>
<meta charset="UTF-8">
<title>Products</title
<!-- Bootstrap core CSS -->
<link href="assets/bootstrap/css/bootstrap.css" rel="stylesheet">
<!-- Dropzone css-->
<link rel="stylesheet" href="assets/css/plugins/dropzone/dropzone.css">
<link rel="stylesheet" href="assets/css/plugins/dropzone/basic.css">
</head>
<body>
<div class="container" style="margin-top: 300px">
<div class="well">
<form action="/file/upload" class="dropzone" id="dropzoneForm">
<div class="fallback">
<input type="file" name="file" multiple="multiple">
</div>
</form>
</div>
</div>
<script src="https://ajax.googleapis./ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="assets/plugins/dropzone/dropzone.js"></script>
<script>
Dropzone.options.dropzoneForm = {
dictDefaultMessage: 'Drop file here or click to upload!!!!!!!!',
addRemoveLinks: true,
init: function () {
this.on("addedfile", function(file) { alert("Added file."); });
}
};
</script>
</body>
</html>