JSFiddle - React, Tailwind, and code Playground

by ubaidillahhf

HTML

<input type="file" id="UploadInput"/>
<br/>
<div id="UploadPath"></div>
<div data-label="UploadImage"><img/></div>

JavaScript

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('[data-label="UploadImage"]').children('img').attr('src', e.target.result);

        }
        

        reader.readAsDataURL(input.files[0]);
    }
}

$('#UploadInput').change(function(){
    readURL(this);
    var path, url;
    url = this.value;
    url = url.split("\\");
    path = url[2];
    $("#UploadPath").text(path);
});