JSFiddle - React, Tailwind, and code Playground

by Shin Okada

HTML

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="progress">
    <div class="progress-bar progress-bar-striped" style="min-width: 20px;">
    </div>
</div>

<input type="file" name="file" id="file" />

<div id="message"></div>

CSS

.progress{
  margin: 20px;        
}

#file{
  position: fixed;
  top: 60px;
  margin-left: 20px;
}

#message{
  position: fixed;
  top: 100px;
  margin-left: 20px;
}

JavaScript

let i = 0;
let filesize = 4200000;
let divider = 10000 ;

$(".progress").hide();

const timer = ms => new Promise(res => setTimeout(res, ms))

$("#file").change(function () {
    let file = $('#file')[0].files[0];
    let filesize = file.size;
    let timeout = (filesize / divider).toFixed(0);
    $(".progress").show();
    $("#message").text("Filesize: "+filesize + ". Timeout: "+timeout);
    
    progressBar(timeout);
})

async function progressBar(timeout){
    for (var i=1; i<100; i++){
        $(".progress-bar").css("width", i + "%").text(i + " %");
        await timer(timeout);
    }
    $(".progress").hide();
}