Uploading files with a progress bar and percentage - AJAX XMLHTTPRequest

In this episode, we're going write some JavaScript to POST a file to the server, cancel the upload and display a progress bar and percent complete, along with some simple notifications.

[juliannash]

Demo@ 0:41
Flask server route@ 2:44
HTML@ 5:29
JavaScript@ 14:39

[gabriel_felippe]

Thank you Julian,


Always great and useful content!

[tusharsnn]

very nice line to line explanation ..thanks bro

[deependraku]

can you please help me to make this on Django im getting lots of errors please help sir.

[robertligeza]

Is it possible to do upload by clicking directly the Open button in file system dialogue, like it is in gmail?

[RezaPratamaR]

can i implement this with codeigniter and ajax?

[pricklypickles]

Hi, Julian, this message is probably in vain, however i'll give it a try. My file has only some success. I can click inside the input dialog box or the browse button, I can see the file that I wish to upload('image'), I can see the name of the image file name loaded inside input dialog box, then that is it. nothing else happens, I then click on then upload button and nothing else happens. I can see everything works on your web page. What would've been also nice is to see the actual file loaded into the folder, that the file loaded to? Where on your computer did the file go to? I've checked and copied your txt data maticulously and nothing. I did notice some text on your views.py page above the import flask text, not sure if that had something to do with it. What is Flask? Do I need it? I did try to npm install flask, it let me and flask was installed then when i type " flask run ", it says cannot find flask right after i just installed it. I have installed node js on my vs code, don't know if that helps. When I go into my folder to click on the upload_video.html file, it will load up. My input dialog is much smaller than yours. probably not that important but does indicate something wrong with my file..! Please can you help, thanks.

[SOUVIK_RAY_]

Hey Julian! Nice tutorial. Can you show how to support multi file upload for this? Maybe make a separate tutorial? That would be great! Great job overall mate!

[KenthhFelix]

Hello Julian!! I just wanna ask if I can have permission to use a clip of your video? It's for a school project and I will really appreciate it!☺️

[batyratamamedov]

Hi Julian Thanks for the awesome tutorial. Your code is clear and explanation is top notch! I followed everything you written but somehow I get '400 Bad Request' error. I researched a little bit and a lot of sources say to pass csrf_token along with the data. In other soures in shows how to do it with ajax but in your request.send(data) case I couldn't figure it out. Can you please help me on this? Thanks in advance!

[smilebig]

Man why your videos resolution is very low. Can't see stuff on screen. Better try zooming in next time.

[nimeshkumar]

Hi, First of all thank you for this, i am not able to see the uploaded file, can you please tell me where i can find the uploaded file as i have to fetch it and perform the operation on it. I am using pycharm IDE. And is there a way i can uploaded my file in my directory?

[yasirtahirkheli]

Every was great about it until Python and flask....lol....I am php developer...but anyways..great to see u doing this for educational purposes....for free....long live...

[professoryousif]

Please explain how to install the programs with the progress bar? How to add programs to the progress bar

[latlov]

33:00 reset() function. When clicking on the cancel button

[sumankathet]

Earned a subscriber...
Great content broo..
Keep it up...
Looking forward more more such contents...

[p.z.]

Great content !
Can you post your javascripts imports at the end of the body please ?

[cheriftouil]

Thanks a lot but how to download large files

[VideoTop]

Good Video, can you send me your code with GoogleDrive?

[okeregodspowerkelsey]

Nice video bro. Keep up the good work.