JSFiddle - React, Tailwind, and code Playground

HTML

<form>
<p><label for="file" style="cursor: pointer;"><b>Upload Image</b></label></p>
<p><input type="file" accept="image/*" name="image" id="file"  onchange="loadFile(event)"></p>

<p><img style="-webkit-filter: grayscale(100%); filter: grayscale(100%);" id="output" width="200" /></p><br>

</form>

JavaScript

var loadFile = function(event) {
	var image = document.getElementById('output');
	image.src = URL.createObjectURL(event.target.files[0]);
};