CODEWITHSUNDEEP
javascriptjqueryhtmldropzone.js
s.n
s.n

Reputation: 703

Dropzone.js events not firing

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"

  };

});

Upvotes: 2

Views: 7231

Answers (1)

s.n
s.n

Reputation: 703

After 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.com/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>

Upvotes: 14

Related Questions