JSFiddle - React, Tailwind, and code Playground

by Vitaliy

HTML

<input type='file' class="img" />
<img class="preview" src="#" alt="">

CSS

.preview{
  display:none;
}
.preview.show{
  display:block;
}

JavaScript

function showPic(input) {
	if (input.files && input.files[0]) {
		var reader = new FileReader();         
		reader.onload = function (e) {
			document.querySelector(".preview").src = e.target.result;
      document.querySelector(".preview").classList.add("show");
		}  
		reader.readAsDataURL(input.files[0]);
	}
}
    
document.querySelector(".img").onchange = function(){
  showPic(this);
}