A sample file upload using Javascrip

fileupload.js

// example html
<input type="file" id="upload"  style="display:none" name="upload">
<button  id="clik"> Click to Upload Video</button>

//Start Upload
function _(el) {//helper function
    return document.getElementById(el);
}

var fileSelect = _("clik"),
fileElem = _("upload");
if(fileSelect) {
  fileSelect.addEventListener("click", function (e) {
    if (fileElem) {
      fileElem.click();
    }
    }, false);
}

var upl;
//get file select input element by ID
if(upl = _("upload")){
    upl.onchange = function() { //start onchange event
    
            var formData = new FormData();
            //use FormData API to get files
            for(var i in fileElem.files) {
                formData.append('upload[]', fileElem.files[i]);
            }

           
            
            // use aja to post and get progress
            var ajax = new XMLHttpRequest();

            ajax.upload.addEventListener("progress", progressHandler, false);
            ajax.addEventListener("loadstart", startHandler, false);
            ajax.addEventListener("load", completeHandler, false);
            ajax.addEventListener("error", errorHandler, false);
            ajax.addEventListener("abort", abortHandler, false);
            ajax.open("POST", "/upload"); 

            ajax.send(formData);

            function formatBytes(bytes, decimals) { // helpeer to format progress in bytes
                if(bytes == 0) return '0 Bytes';
                var k = 1024,
                    dm = decimals <= 0 ? 0 : decimals || 2,
                    sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
                    i = Math.floor(Math.log(bytes) / Math.log(k));
                return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
             }
          
          
          function progressHandler(event) {
            // _("loaded_n_total").innerHTML = "Uploaded " + event.loaded + " bytes of " + event.total;
            var percent = (event.loaded / event.total) * 100;

            _("total").innerHTML = formatBytes(event.loaded) + " of " + formatBytes(event.total);

            _("progressBar").style.width = Math.round(percent) + '%';
            _("status").innerHTML = Math.round(percent) + "% uploaded... please keep this page open until it's done.";
          }
          function startHandler(event) {
            _("upload-panel").style.display = "none";
            _("info-panel").style.display = "block";
            _("titleView").innerHTML = "Uploading...";
          }
          function completeHandler(event) {
            console.log(event.target);
            var res = JSON.parse(event.target.response);
            _("titleView").innerHTML = res.name.split('.')[0];
            _("id").value = res._id;
            _("status").innerHTML = "Upload Completed! Fill in details below";
            _("progressBar").style.backgroundColor  += "#90ee90"; 
            // _("vidThumbnail").classList.remove("fa-spin");
            // _("vidThumbnail").classList.remove("fa-spinner");
            _("imgplace").innerHTML = ` <img src="thumbnails/${res.defaultThumbnail}" alt="Smiley face" height="94" width="162"> `;
          }
          
          function errorHandler(event) {
            _("status").innerHTML = "Upload Failed";
          }
          function abortHandler(event) {
            _("status").innerHTML = "Upload Aborted";
          }

    }//end onchange event
}