JSFiddle - React, Tailwind, and code Playground

HTML

<input class="cancel" type="file" name="userFile" id="userFile" accept="image/*"/>
<h1 id='loadingHeader'>-</h1>
<img id='theImage' src=''/>

CSS

#loadingHeader
{    
    position:absolute;
}

JavaScript

function imageConversionCallback(base64Data, fileName)
{    
    theImage.src = base64Data;
}
var el = document.getElementById("userFile");
el.addEventListener("change", fileChosen, false);
function fileChosen()
{
    var fileInput = document.getElementById( "userFile" );
    if( 'files' in fileInput )
    {
        if( fileInput.files.length > 0 )
        {
            var theFile = fileInput.files[0];                
            base64ResizedFromFile( theFile, imageConversionCallback, theFile.name );            
        }
    }    
}
   
function base64ResizedFromFile(fileToUpload, completion, context)
{        
    var img = document.createElement( "img" );
    var reader = new FileReader();
    img.onload = function ()
    {
        var MAX_WIDTH = 500;
        var width = img.width;
        var height = img.height;
        
        if( width > MAX_WIDTH )
        {                
            height *= MAX_WIDTH / width;
            width = MAX_WIDTH;
        }
        
        var canvas = document.createElement( "canvas" );
        canvas.width = width;
        canvas.height = height;
        var ctx = canvas.getContext( "2d" );
        ctx.drawImage( img, 0, 0, width, height );//blocking here
        
        var dataurl = canvas.toDataURL( "image/png" );
        completion( dataurl, context );
    };
    
    reader.onload = function ( e )
    {
        img.src = e.target.result;//blocking here
    };
    reader.readAsDataURL( fileToUpload );                               
}

var moveCount=0;
var loadingHeader = document.getElementById('loadingHeader');
loadingHeader.style.left='0px';
function moveLoading()
{
    
    if( moveCount < 200 )
    {
        var leftVal = parseInt(loadingHeader.style.left, 10);        
        loadingHeader.style.left = leftVal + 1 + 'px';
        moveCount++;
    }
    else
    {
        loadingHeader.style.left = '0px';
        moveCount=0;
    }    
}
setInterval(moveLoading,10);