JSFiddle - React, Tailwind, and code Playground

by seanmcgary

HTML

<div id="dropzone">
    Drop files here
</div>

CSS

#dropzone {
    padding: 40px 0px;
    width: 300px;
    background: #eee;
    color: #454545;
    font-family: Helvetica, Arial, sans-serif;
    text-align: center;
}

JavaScript

$(document).ready(function(){
    dz = $('#dropzone');
    
    dz.on('dragover', function(evt){
        evt.preventDefault();
        evt.stopPropagation();           
    });
    
    dz.on('drop', function(evt){
        evt.preventDefault();
        evt.stopPropagation();
        console.log(evt.originalEvent.dataTransfer.files);     
    });        
});