JSFiddle - React, Tailwind, and code Playground

HTML

<input type="file" id="inp">
<pre id="_log"></pre>

CSS

#_log {
  background: rgba(0,0,0,0.5);
  opacity: 0.7;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  max-height: 33vh;
  overflow: auto;
  z-index: 999;
  pointer-events: none;
  margin: 0;
  padding: 6px 12px 12px;
}

JavaScript

inp.oninput = e => {
	const file = inp.files[ 0 ];
	const blobURI = URL.createObjectURL( file );
  const oneByte = new Response( file ).arrayBuffer();
	countDown( 70 )
  	.then( () => {
    
			const reader = new FileReader();
      reader.onload = e => log( 'reader success');
      reader.onerror = e => log( 'reader failure');
			reader.readAsArrayBuffer( file );
      
      const img = new Image();
      img.onload = e => log( 'blob URI success' );
      img.onerror = e => log( 'blob URI failure' );
      img.src = blobURI;
      
      fetch( blobURI )
      	.then( r => {
        	if( r.ok ) { log( "fetching blob URI success" ) }
          else { throw ''; }
        } )
        .catch( e => { log( "fetching blob URI failure" ) } );
  	} )
};


function log( ...msg ) {
	try {
		_log.textContent += msg.map( JSON.stringify ).join( '\n' ) + '\n';
  } catch( e ){};
  console.log.apply( console, msg );
}
async function countDown( seconds, gap = 1 ) {
	const elem = document.createElement( 'div' );
	document.body.append( elem );
	let elapsed = 0;
	while( elapsed  < seconds ) {
  	elapsed += gap;
    elem.textContent = `Please wait ${ seconds - elapsed } seconds`;
  	await wait( gap * 1000 );
  }
  elem.remove();
}
function wait( ms ) { return new Promise(res => setTimeout( res, ms ) ) }