JSFiddle - React, Tailwind, and code Playground

HTML

<input type='file' accept='image/*' onchange='openFile(event)'><br>
<img id='output'>

JavaScript

var openFile = function(event) {
    console.log("1. onchange triggered");
    
    var input = event.target;
	
    var reader = new FileReader();
    
    console.log("2. Set handler for onload event");
    reader.onload = function(){
      console.log("5. onload handler called. Now the file is ready");
      var dataURL = reader.result;
      var output = document.getElementById('output');
      console.log("6. Set img src to image");
      output.src = dataURL;

    };
    console.log("3. Start reading file");
    reader.readAsDataURL(input.files[0]);
    
    console.log("4. Try to look at the file read result, even though the file has finished being read yet...");
    var hello=reader.result;
    console.log(hello);
    console.log(reader.result);
 };