JSFiddle - React, Tailwind, and code Playground

by mrcatoff

HTML

<div><input type="file" /></div>
<div class="file info"></div>

JavaScript

const input = document.querySelector('input[type="file"]');
const preview = document.querySelector('.file.info');
input.addEventListener('change', function () {
	if(this.files && this.files[0]) {
  	const reader = new FileReader();
    reader.addEventListener('load', function(event) {
    	const image = new Image();
      image.src = event.target.result;
      preview.append(image);
    })
    reader.readAsDataURL(input.files[0]);
  }
});