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

[@kennyaires7131]

By far the best Flask channel on youtube! it has everything. Thanks a lot!

[@prettyprinted]

Glad you think that. Thanks!

[@parvathygs1810]

Thank you for this excellent video.. I implemented the same logic in django.. A file uploaded with progress bar successfully...I have a question : Could you please tell me how to use same logic for multiple fileupload with progress bar in django...?

[@jasonsmith6826]

Yes, please. I’d appreciate this as well.

[@nalini6800]

Very good one from what all i searched so far!!! Please keep doing this great job.

[@guinea_horn]

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?

[@nimmero]

Have you already worked it out? I have the same problem right now ... :D

[@yomajo]

@@nimmero Have YOU worked it out? :D

[@BinaryBugs]

Great content Thanks!. Suppose If we want to send a input text data along with form. how to achieve that?

[@poojakadam3443]

I implemented this code working fine, One of the best solution i found, nicely explained. I want to show progress bar for multiple file processing, can u please guide?

[@pedropvf]

Thanks a lot for the succinct and clear example and explanation. It helped a lot

[@prettyprinted]

you're welcome! Thanks for watching.

[@renzors]

Excellent explanation, Anthony. It helps a lot! Thank you so much.

[@prettyprinted]

I'm glad I could help.

[@rushas]

This was very helpful. Thanks

[@kamilpazik2414]

Really great, thank you. Recently I'm wondering how to connect that with drag & drop, any good ideas ?

[@prettyprinted]

I could make a video on how to add drag & drop in the next few days. Thanks for watching!

[@gurucode.studio]

Thanks dude , i enjoyed the video, and also it would be nice if we hide the progress bar by default so when the upload starting the progress bar get appeared, and again your channel is the best keep it like that :)

[@prettyprinted]

It should be as simple as giving the progress bar a hidden attribute and then removing it once the upload starts.

[@naveentechhie]

can you create video on step bar which should work responsive with backed

[@davidbalague9311]

Excellent video, just what I was looking for. Well explained and detailed. Thanks!

[@prettyprinted]

You're welcome! Thanks for watching.

[@eyonky6234]

This wouldn't work with multiple files though. Any ideas how would be able to do that?

[@gkcchief2802]

This is exactly what I was looking

[@himansu979]

Thank you so much for nice video. Do you have an example how to make drag and drop area for images using Flask. User should be able to drag an image and using flask should be able to save to some different folder.

[@prettyprinted]

I don't yet, but that's a good topic. I'll add it to my list of topics to cover.

[@namrathasrimateti9119]

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!

[@TheXSimulated]

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

[@prettyprinted]

I don't, but I'll consider making one. Thanks for the idea.

[@QUUBBLE]

hi, Great tutorial. I have a question: how to show the progress bar visible only at the time of upload and hidden at all other times using bootstrap (in this tutorial). thanks

[@prettyprinted]

Create the progress as hidden in HTML (style="display:none;") Then in the submit event function, you can show it with $(...).show();

[@tirthrajput4483]

every thing is explain well , but when i writing app.py program flask.ext.uploads not working give error '" from flask.ext.uploads import UploadSet,configure_uploads ModuleNotFoundError: No module named 'flask.ext' "

[@AndyChamberlainMusic]

newer version of flask don't have the ext folder. All that import was doing was setting up file saving, so you can do that manually with normal python. I replaced line 14: filename = files.save(request.files["media"]) with this: file = request.files["media"] file.save("uploads/" + file.filename) However this has no checking for a good filename format so I'd suggest adding this import statement: from werkzeug.utils import secure_filename and then having the function look like this: @app.route("/upload", methods=["GET", "POST"]) def upload(): if request.method == "POST" and "media" in request.files: file = request.files["media"] filename = secure_filename(file.filename) file.save("uploads/" + filename) return render_template("upload.html")

[@danielcardonamartinez3535]

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

[@gkcchief2802]

Thanks bro...u save my time

[@pauldumanig]

Hi! instead of determining the 'loaded' value from the actual bytes loaded, how do i suppose to get the value coming from the controller instead? I intend to implement it not with file upload, but with reports query from the DB.

[@prettyprinted]

That's a little more complicated. Just thinking about it now, you'd probably need to figure out a novel way of measuring progress of your report queries along with having some real time functionality (like Socket.IO) to push the progress percentage to the client. If you're interested, I offer coaching to help solve more complicated problems like this. You can read about it here: prettyprinted.com/coaching

[@asn6543]

I used exactly your code but my progress-bar percentage is not the file upoladed percentage. And the form is processing. Am I missing something?

[@loaisiwas4483]

In my application, after uploading the file, the page is redirecting to the file page, "return redirect(url_for('file_view', id = file.id))" where I have another view that shows the details of this file. I followed the video, the progress bar was added successfully, but the redirect no longer works. Tried doing a redirect from javascript, but it is possible to redirect to a static link, but I want to do a redirect and pass the id number of the uploaded file (the id is set by flask sqlalchemy) any solution please?

[@charanch3318]

How to create a progressbar with percantage , when we call a web service through ajax call.

[@lyndontan9594]

Great!! Tuts!. but i have a question my progressbar is already done but my upload file is still uploading.

[@prettyprinted]

Thanks. It's hard for me to tell you what's wrong with that description. How off is the sync between the bar and uploaded file?

[@lyndontan9594]

Goodmorning! thanks for the reply ahm on your video in your console.log everytime your'e uploading a data the bytes and total size are incrementing while in part its already done for example if i have a size of "76025" it will not increment 1...76025 it will finished at 76025 thats why my progressbar already completed.

[@yohankurniadi4999]

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.

[@NiteshSingh-yi1xi]

Hi Anthony I am trying to create a progress bar for a http get route which internally calls another rest api, the whole business logic is in my http get route if 200 it redirects to success route else error route. Now I am trying to bring progress bar so in jQuery I am able to make route call for the request and I am getting response as well but my next route i.e. the plan html which is not getting loaded could you please advise on what may be the issue.

[@jinkaz2895]

how to send file with data(text) like i want to have a texbox for filename..?

[@Amazoniacentral]

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

[@anikets4270]

Thanks for making these tuts man

[@prettyprinted]

You're welcome, and thanks for watching!

[@maximerouhier2201]

Thank you for what you're doing ! It helps a lot !

[@smilebig3884]

This is great, thanks man.

[@kayajones9215]

is there a way in my flask app that I can have a loading bar on one screen then when it reaches 100% or goes all the way through another screen loads??

[@romansleonovs495]

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

[@justynatajemnica3130]

I just sent all files (original directories) to server (and i checked on my Apache as well) and script do not working. When I select a file and click to send it then page i reload ang get info PAGE NOT FOUD

[@nartiscoding]

SAme problem

[@mrhaite]

Hello, i just fetching json data using AJAX, with Rails any idea?

[@prettyprinted]

I don't have any Rails videos, but the idea is basically the same once you learn how to create endpoints in Rails.

[@jerempatton]

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!

[@prettyprinted]

Both are JavaScript based. Do you have JavaScript active in your browser?

[@jerempatton]

@@prettyprinted thanks for your answer. Yes it is allowed on the browser (I also tried with firefox as a comparison and it does the same in the status bar). However, still no console logs or updated progress bar :/

[@abhinavkaushik6817]

how can i render html rather alert and pop up?

[@carlospatricio6842]

He, I would like to know how can I do a progress bar to change the page, I am new in python and I have a page to run ansible but this page is loading for a time and I want to put a progress bar for the users, please can you help me

[@prettyprinted]

Any progress bar has to be based on actual processing. So first thing you have to figure is how to measure the progress of some process. Then after that, you create the actual progress bar like I've done in this video.

[@carlospatricio6842]

thank you Sr, I needed a gif, I think is not correct but was so hard do that

[@3e950]

how you setup IP address for opening .html template is it localhost for something

[@vaishnav4750]

Try live server plugin...

[@Hafiz9188]

Hello, i am using this code in word-Press jQuery ajax. instead of showing me the real time process it shows me all progress at once.. when i click on button ti Bytes loaded, Total size and percentage results display at once,

[@jacobhenry7223]

you are a good teacher

[@prettyprinted]

Thanks, I appreciate it!

[@jacobhenry7223]

good.... one day i will be like you in python programming because i use you videos for learning....and thank you for being open to African people like me........i love you

[@MyFlabbergast]

@@jacobhenry7223 African people are just as awesome as anyone else around the globe. And thanks a ton, @Pretty Printed.

[@desectorconfeliox8860]

Good video, helped me a lot!

[@prettyprinted]

Thanks for watching!

[@chrisfraps589]

Hi can this be implemented on Django?

[@prettyprinted]

I'll see what I can do.

[@allenteezyy2744]

Sir why i'm getting FILE UPLOADED! when i click submit button even if i don't put any file on my input file. And if i put a video it says FILE UPLOADED! but when i check my UPLOAD FOLDER there's nothing in it. :/

[@allenteezyy2744]

I hope you get this sir. :(

[@prettyprinted]

For saving the file, do you have to correct directory setup? Also, this video covers a narrow use case, so it doesn't cover a case where a user doesn't behave as expected.

[@tecnofest7683]

It's good job. Thanks!

[@prettyprinted]

Thanks for watching!

[@heavydestroyer71]

Great work. Thanks you for sharing.

[@prettyprinted]

Thanks for watching!

[@akshayrathore8739]

thank u sir.., for sharing knowledge

[@prettyprinted]

Thanks for watching!

[@ozcanyarimdunya]

Simple and perfect. Thank you.

[@prettyprinted]

You're welcome!

[@ashokkumar5581]

Great video.

[@nadiaochikh3304]

please why the code is not working????

[@adesanyaadewale6001]

Great Video. Thanks for this.

[@prettyprinted]

Thanks for watching!

[@shanefilan7226]

Thanks dude, really helpful. And could u give us a copy of the sample code?

[@prettyprinted]

Here you go: s3.us-east-2.amazonaws.com/prettyprinted/upload_progress_bar_jquery.zip

[@aggieaggie3946]

mine has failed to function it just brings me errors

[@tienatrom1624]

thank you so much

[@prettyprinted]

You're welcome! Thanks for watching.

[@shibbirahmadosmani5896]

Thanks

[@prettyprinted]

You're welcome! Thanks for watching.

[@eugeneji6371]

how do I make slim progress bar>>?

[@prettyprinted]

It's just CSS changes.

[@eugeneji6371]

@@prettyprinted Thanks!! American friend~

[@carlossaulcastanedacastane1713]

Thanks man

[@prettyprinted]

You're welcome! Thanks for watching.