How to Create a File Upload Progress Bar Using jQuery and Bootstrap


In this video I’ll show you how to create a form upload progress bar using jQuery, Bootstrap and Flask.

To download a free Flask cheat sheet, go here:

To view my video on Flask uploads, go here:

Download the code here:

Thanks to Renzo for the video idea.

Web Development Courses:
Flask Cheatsheet:

Google Plus:


Xem thêm bài viết khác:


  1. every thing is explain well , but when i writing program flask.ext.uploads not working give error '" from flask.ext.uploads import UploadSet,configure_uploads

    ModuleNotFoundError: No module named 'flask.ext' "

  2. Great Video sir!! It helped me a lot. I'm wondering if I need to upload multiple files how can the progress bar calculate avg of all those files. Any suggestions would be appreciated. Thank You!

  3. Thanks for the video. I'm not sure if you'll see this but I've got a quick question 😊

    I want to update a page with a value that changes overtime based on calculation on the backend, and maybe have a progress bar associated with that. How would I continuously update an element on the page based on data that comes from the backend, say, several times per second, without reloading the page each time?

  4. Essa sunção xhr.upload.addEventListener('progress', function (e) {} não está funcionando no chrome e nem no firefox, o que houve? porque isso? já verifiquei em vários fóruns mas nada de resposta

  5. Hi Sir,

    how you upload the data? because I can't get the data uploaded into the folder,.
    the progress bar works until 100% and said "File uploaded!", but when I check into the folder, the file doesn't exist.

    Please advice.

    Thank You.

  6. Is there a way to do a progress bar with a runtime of a function from php?. Thanks for the video.

  7. How to make the same script but supporting multiple files and each file start upload after the previous finished?

  8. Hello!
    I downloaded the files and ran them on my localhost. However neither the progress bar works, nor the console.log() seems to be working… any idea why?
    UPDATE: the progress seems to be running in the browser status bar instead of the itself!

  9. Hi, just wondering if you have a video of how to create an image upload interface with image preview using Bootstrap elements? Thanks!


Please enter your comment!
Please enter your name here