JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://gist.github.com/raw/988592/f8cee6e3a6262e482e9dabb88a9975625727a552/fakeXMLhttpRequest.js"></script>
<div id="uploader">
    <input id="fileInput" type="file"></input>
    <progress id="progress" value="0">0%</progress>
</div>
<div>
    <button id="send">Send</button>
</div>

CSS

#uploader {
    display: inline-block;
}
#progress {
    width: 100%;
}

JavaScript

document.querySelector("#send").onclick = function() {
    // access the file object
    var file = document.querySelector("#fileInput").files[0],
        xhr, reader;
    // handle the case where no file has been selected
    if ( !file ) {
        return false;
    }
    // Give immediate visual feedback with
    // the "indeterminate progress" animation
    var progress = document.querySelector("#progress");
    progress.removeAttribute("value");

    // This demo uses a fake XHR object simulating a slow upload
    // Use XMLHttpRequest to actually send a file
    xhr = new fakeXMLHttpRequest();
    // listen for progress event on the upload request
    xhr.upload.addEventListener("progress", function(e) {

        // update the progress bar accordingly
        progress.value = e.loaded / e.total;

        // fallback for browsers not supporting <progress>
        progress.innerHTML =  ~~(100 * e.loaded / e.total) + "%";

    });
    // upload the file
    xhr.open("POST", window.location.href);
    xhr.send(file);
};