JSFiddle - React, Tailwind, and code Playground

by Yurii Shpylovyi

HTML

<div id="descr_1" class="descr"></div>
<div class="dropzone" id="dropzone_1" data-path="S:\test\dropzone_1\">
    <div>dropzone_1</div>
    <input type="file" />
</div>
<div id="descr_2" class="descr"></div>
<div class="dropzone" id="dropzone_2" data-path="S:\test\dropzone_2\">
    <div>dropzone_2</div>
    <input type="file" />
</div>

CSS

.dropzone {
    position: relative;
    border: 5px dotted #000;
    border-radius: 10px;
    color: #000;
    font: bold 16px/100px arial;
    height: 100px;
    margin: 30px auto;
    text-align: center;
    width: 100px;
}

.dropzone.hover {
    border: 4px solid green;
    color: green;
}

.dropzone.dropped {
    background: #222;
    border: 5px solid #444;
}
.dropzone div {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.dropzone img {
    border-radius: 5px;
    vertical-align: middle;
    max-width: 95%;
    max-height: 95%;
}

.dropzone [type="file"] {
    cursor: pointer;
    position: absolute;
    opacity: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

JavaScript

//let path = 'S:\\test\\';
$('.dropzone').each(function(){
	let id = $(this).attr('id');
  let dropzone = $('#'+id),
	input    = dropzone.find('input');
  //console.log(input);
  let path = $(this).data('path');
  input.on('change', function(e) {
    var file = this.files[0];
    console.log(path+file.name);
    console.log(id.substr(9));
    $('#descr_'+id.substr(9)).text(path+file.name);

    $('#'+id).removeClass('hover').addClass('dropped').find('img').remove();
    
    // upload file here
    showfile(file,id); // showing file for demonstration ... 
});
  dropzone.on({
    dragenter : function(e) { //function for drag into element, just turns the bix X white
    $(dropzone).addClass('hover');
},
    dragleave : function(e) { //function for dragging out of element                         
    $(dropzone).removeClass('hover');
}
  });
  
})


function showfile(file,id) {
	var reader = new FileReader(file);
    reader.readAsDataURL(file);

    reader.onload = function(e) {
        $('#'+id+' div').html($('<img />').attr('src', e.target.result).fadeIn());
    }
}