JSFiddle - React, Tailwind, and code Playground

by Castrolol

HTML

<input type="file" id="i" />
<span id="p" ></span>
<img src="" id="img" />

JavaScript

var input = document.querySelector("#i");
var img = document.querySelector("#img");
var span = document.querySelector("#p");


function lerArquivo(file){

    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.addEventListener('progress', function(e){

        console.log(e);
        var loaded = Math.round( ( e.loaded * 10000 ) / e.total ) / 100;
        span.textContent = loaded + "%";

    });
    
    reader.onload = function(){
    
        img.src = reader.result;
        span.textContent = "loaded";
        
    };


}

input.addEventListener("change", function(e){

    var file = input.files[0];
    if( !file ) return;
    lerArquivo(file);

});