file upload progressbar event listener code example

Example: upload progress bar script

postFile('thumbnail' , 'progress-bar-thumbnail');


//  "InputFile" & "ProgressBar" are ID of elements 
function postFile(InputFile , ProgressBar) {
            var formdata = new FormData();

            formdata.append(InputFile, $('#'+InputFile)[0].files[0]);

            let request = new XMLHttpRequest();

            request.upload.addEventListener('progress', function (e) {
                let file1Size = $('#'+InputFile)[0].files[0].size;

                if (e.loaded <= file1Size) {
                    let percent = Math.round(e.loaded / file1Size * 100);
                    $('#'+ProgressBar).width(percent + '%').html(percent + '%');
                }

                if(e.loaded == e.total){
                    $('#'+ProgressBar).width(100 + '%').html(100 + '%');
                }
            });

  			// instead of '/admin/blog', write your form action
            request.open('post', '/admin/blog');
            request.timeout = 45000;
            request.send(formdata);
        }