JSFiddle - React, Tailwind, and code Playground

HTML

<input id="fImage" type="file">
<img id="image">
<input id="hdnImage" type="hidden">

JavaScript

document.getElementById("fImage").addEventListener("change",function(e){
    var file = e.target.files[0];
    
    if(!file || !file.type.match(/image.*/))
    {
        alert("من فضلك أدخل ملف صورة");
        return;
    }
    
    var reader = new FileReader();
    
    reader.onload = function(e)
    {
        document.getElementById("image").src = reader.result;
        document.getElementById("hdnImage").value = reader.result;
    };
    
    reader.readAsDataURL(file);
});