JSFiddle - React, Tailwind, and code Playground

by confile

HTML

<input type="file" id="inputFile" accept="image/png, image/jpeg">
<br><br>
    
<img id="image" />

CSS

#image {
    border: 2px solid blue;
    width: 400px;
}

JavaScript

var _URL = URL || webkitURL;

var input = document.getElementById("inputFile");
var image = document.getElementById("image");

input.onchange = function() {
    var files = input.files;
	var myFile = files[0];
    
    image.src = _URL.createObjectURL(myFile);

}