JSFiddle - React, Tailwind, and code Playground

HTML

<div id="uploader" onclick="$('#filePhoto').click()">
    click here or drag here your images for preview and set userprofile_picture data
    <img src=""/>
</div>
<input type="file" name="userprofile_picture"  id="filePhoto" />

CSS

#uploader {position:relative; overflow:hidden; width:300px; height:350px; background:transparent; border:2px dashed #e8e8e8;cursor:pointer;padding:5px;color:#555;font-family:'Segoe UI';font-weight:bold;}

#uploader:hover{color:#999;}

#filePhoto{
    display:none;
}

#uploader img{
    position:absolute;
    width:312px;
    height:362px;
    top:-1px;
    left:-1px;
    z-index:-1;
    border:none;
    background-color: #eee;
}

JavaScript

var imageLoader = document.getElementById('filePhoto');
    imageLoader.addEventListener('change', handleImage, false);

function handleImage(e) {
    var reader = new FileReader();
    reader.onload = function (event) {
        $('#uploader img').attr('src',event.target.result);
    }
    reader.readAsDataURL(e.target.files[0]);
    
}

var dropbox;
dropbox = document.getElementById("uploader");
dropbox.addEventListener("dragenter", dragenter, false);
dropbox.addEventListener("dragover", dragover, false);
dropbox.addEventListener("drop", drop, false);

function dragenter(e) {
  e.stopPropagation();
  e.preventDefault();
}

function dragover(e) {
  e.stopPropagation();
  e.preventDefault();
}

function drop(e) {
  e.stopPropagation();
  e.preventDefault();
  //you can check e's properties
  //console.log(e);
  var dt = e.dataTransfer;
  var files = dt.files;
  
  //this code line fires your 'handleImage' function (imageLoader change event)
  imageLoader.files = files;
}