JSFiddle - React, Tailwind, and code Playground

by nobuts

HTML

<div class="container">
    <div class="row">
      <div class="col-md-6">
        <h3>Image(Drag and Drop)</h3>
      </div>
      <div class="col-md-6">
        <h3>Preview</h3>
      </div>
  </div>
  <div class="row">
        <div class="col-md-6">
            <div id="dropimage">
            </div>
        </div>
        <div class="col-md-6">
            <img id="image"></img>
        </div>
    </div>
  <h3>Results</h3>
</div>

CSS

#dropimage {
    width: 100%;
    height: 500px;
    border: 1px dashed #f00;
}

JavaScript

$(function(){
   $(document).on('dragover', function(event){
        event.stopPropagation();
        event.preventDefault();
    });
 
    $(document).on('drop', function(event){
        event.stopPropagation();
        event.preventDefault();
    });
 
    $("#dropimage").on('drop', function(event){
        if (event.originalEvent.dataTransfer.files != null) {
           var files = event.originalEvent.dataTransfer.files;
           var file = files[0];
           var reader = new FileReader();
           reader.onload = function(e){ 
               dataurl = e.target.result;
               $("#image").attr('src', dataurl);
           });
           reader.readAsDataURL(file);
        }
    });
});