2

I am making a web chat application that has a feature to drag-drop file and then upload it to the server (I have to make it like whatsapp web which has this feature). I'm using dropzone.js to achieve that and has been working great so far except for one thing. The event 'sending' never get called when dropping image from browser. Here's the example

new Dropzone('.drag-overlay', { 
  url: "www.example.com",
  paramName: "attachment",
  init: function() {
    this.on("drop", function(e){
      console.log("Drop event");
    });
    this.on("sending", function(file){
      console.log("Sending event");  
    });
  }
});

The drop event is called fine but the sending never get called. Can anybody give me a direction how can I send file from another browser using this library?

Thanks

Pratansyah
  • 457
  • 2
  • 14

1 Answers1

0

Sending Event Call . upload any document . Change Call Dropzone method .

var myDropzone = new Dropzone

Live Demo Here . see Console in web

see Below Example

// Dropzone class:
var myDropzone = new Dropzone(".drag-overlay", { 
  url: "www.example.com",
  paramName: "attachment",
  init: function() {
   this.on("drop", function(e){
   alert('Drop event');
   console.log("Drop event");
   });
  this.on("sending", function(file){
  alert('sending event');
  console.log("Sending event");  
  
});
/*This Code Only Remove tooltip error*/
this.on('error', function(file, errorMessage) {
  var mypreview = document.getElementsByClassName('dz-error');
  mypreview = mypreview[mypreview.length - 1];
  mypreview.classList.toggle('dz-error');
  mypreview.classList.toggle('dz-success');
});
  }
  
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/basic.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.js"></script>
<div class="clsbox-1" runat="server"  >
  <div class="dropzone drag-overlay" id="drag-overlay">

  </div>
 </div>
Sumit patel
  • 3,807
  • 9
  • 34
  • 61
  • I'm sorry it seems that in your fiddle, the sending event still didn't get fired when I drop image from browser. Can you elaborate on your answer? – Pratansyah Nov 16 '16 at 07:42
  • 1
    I think there's a misunderstanding here, I saw your updated answer and you add an alert to make it easier to find out whether the event is fired or not. Just for the sake of being clear, what I meant by "Drop images from browser" was let's say you open a google search image on another tab an drag an image from the result and drop it to the drop area in jsFiddle – Pratansyah Nov 16 '16 at 08:29