JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://malsup.github.com/jquery.form.js"></script>
<h1>Ajax File Upload Demo</h1>
<form id="myForm" method="post" enctype="multipart/form-data">
    <input type="file" size="60" name="myfile" id="myfile" />
</form>
<div id="progress">
    <div id="bar"></div>
    <div id="percent">0%</div >
</div>
<div id="message"></div>

CSS

form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px }
#progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; display: none; }
#bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }
#percent { position:absolute; display:inline-block; top:3px; left:48%; }

JavaScript

$('#myfile').on("change",function(){
    var options = {
        type:"post",
        url: "/echo/html/",
        beforeSend: function()
        {
            $("#progress").show();
            //clear everything
            $("#bar").width('0%');
            $("#message").html("");
            $("#percent").html("0%");
        },
        uploadProgress: function(event, position, total, percentComplete)
        {
            $("#bar").width(percentComplete+'%');
            $("#percent").html(percentComplete+'%');
        },
        success: function()
        {
            $("#bar").width('100%');
            $("#percent").html('100%');
    
        },
        complete: function(response)
        {
            $("#message").html("<font color='green'>"+response.responseText+"</font>");
        },
        error: function()
        {
            $("#message").html("<font color='red'> ERROR: unable to upload files</font>");
        }
    };

    $("#myForm").ajaxSubmit(options);
});