JSFiddle - React, Tailwind, and code Playground

by dshilkret

HTML

<div id="dropFiles" class="dropFiles">
  Drag and drop File Here.
</div>

<div id="messages">
</div>


<br />

CSS

.dropFiles {
  width: 100%;
  min-height: 100px; 
  height: 100px; 
  border: 5px red dashed; 
  text-align: center;
  font-size: 25px;
}

.highlightDropArea {
  border: 5px green dashed;
}

JavaScript

$(document).ready(function(){
  $("#dropFiles").on('dragenter', function(ev) {
      // Entering drop area. Highlight area
      $("#dropFiles").addClass("highlightDropArea");
  });
  
  $("#dropFiles").on('dragleave', function(ev) {
    // Going out of drop area. Remove Highlight
    $("#dropFiles").removeClass("highlightDropArea");
  });
  
  $("#dropFiles").on('drop', function(ev) {
    // Dropping files
    ev.preventDefault();
    ev.stopPropagation();
    // Clear previous messages
    $("#messages").empty();
    if(ev.originalEvent.dataTransfer){
      if(ev.originalEvent.dataTransfer.files.length) {
        var droppedFiles = ev.originalEvent.dataTransfer.files;
        for(var i = 0; i < droppedFiles.length; i++)
        {
          console.log(droppedFiles[i]);
          $("#messages").append("<br /> <b>Dropped File </b>"+ droppedFiles[i].name);
          // Upload droppedFiles[i] to server
          uploadIt(droppedFiles[i]);
          
        }
      }
    }

    $("#dropFiles").removeClass("highlightDropArea");
    return false;
  });
  
  $("#dropFiles").on('dragover', function(ev) {
      ev.preventDefault();
  });
})

function uploadIt(f){
	 $.ajax({
            url: '...',
            data: f,
            processData: false,
            contentType: false,
            type: 'POST',
            success: function(data){
                console.log(data);
              alert('The file has been uploaded');
            },
            error: function(xhr) {
                console.log(xhr);
                alert('An error happended:' + JSON.stringify(xhr));
            },
            complete: function() {
              //alert('Complete');
            }
        });
}