JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.uploader {position:relative; overflow:hidden; width:300px; height:350px; background:#f3f3f3; border:2px dashed #e8e8e8;}

#filePhoto{
    position:absolute;
    width:300px;
    height:400px;
    top:-50px;
    left:0;
    z-index:2;
    opacity:0;
    cursor:pointer;
}

.uploader img,.uploader video{
    position:absolute;
    width:302px;
    height:352px;
    top:-1px;
    left:-1px;
    z-index:1;
    border:none;
    object-fit:cover;
}

JavaScript

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

function handleImage(e) {
		var filetype = imageLoader.files[0].type;
    var reader = new FileReader();
    reader.onload = function (event) {
        if(filetype.indexOf("image") > -1){
        $('.uploader img').attr('src',event.target.result);
        }else if(filetype.indexOf("video") > -1){
        
        $('.uploader video')[0].src =reader.result; 
        }
        
    }
    reader.readAsDataURL(e.target.files[0]);
}