JSFiddle - React, Tailwind, and code Playground

HTML

<section id='formbox'>
		<form name='form'>
			<label for='myfiles'>File: </label><br>
			<input type='file' name='myfiles' id='myfiles'>
		</form>
	</section>
	
	<section id='databox'>
		Файл не выбран
	</section>

CSS

#formbox{
			float: left;
			padding: 20px;
			border: 1px solid #999;
		}
		#databox{
			float: left;
			width: 500px;
			margin-left: 20px;
			padding: 20px;
			border: 1px solid #999
		}
		.directory{
			color: #0000ff;
			font-weight: bold;
			cursor: pointer;
		}

JavaScript

var databox;
   
   function init(){
	databox = document.getElementById('databox');
	var myfiles = document.getElementById('myfiles');
	
	myfiles.addEventListener('change', process)
}

function process(e){
	var files = e.target.files;
	var myfile = files[0];
	console.log(myfile)
  
	var reader = new FileReader();
	
	reader.addEventListener('load', show);
	reader.readAsDataURL(myfile)
}

function show(e){
	var result = e.target.result;
	databox.innerHTML += '<img src="' + result + '">'
	
}

init()