Add class in drop area (file input) when dragging an external image over

Question

Hi how to add class using Jquery when I'm dragging element over drop area.

This is my HTML

<div class="upload">
   <form action="">
      <input class="uploadfile" type="file" id="imageLoader" name="imageLoader">
      <div class="circle"><i class="flaticon-arrows-1"></i></div>
      <div class="text">Drag and Drop or browse from you computer</div>
   </form>
</div> 

I want to add class in upload div class something like this

<div class="upload dragging"></div>

Answer 1

You can do this with javascript by "listen" to event dragover

var upload = document.querySelector('.upload');

upload.addEventListener("dragover", function( event ) {
  this.classList.add('dragging');
}, false);

upload.addEventListener("drop", function( event ) {
  this.classList.remove('dragging');
}, false);

.dragging {
  border:1px solid green;  
}

<div class="upload">
  <form action="">
    <input class="uploadfile" type="file" id="imageLoader" name="imageLoader">
    <div class="circle"><i class="flaticon-arrows-1"></i></div>
    <div class="text">Drag and Drop or browse from you computer</div>
  </form>
</div>