File Upload with Progress Bar in HTML CSS & JavaScript | File Uploader in HTML, CSS & JavaScript
HTML-код
- Опубликовано: 12 июл 2021
- File Upload with Progress Bar in HTML CSS & JavaScript | File Uploader in HTML, CSS & JavaScript
In this video, I have shown you how to upload and save file with progress bar in HTML CSS & JavaScript. I didn't add the drag & drop feature in this project but you can add it easily after watching this video - • Multiple File Uploadin...
Multiple File Uploading with Drag & Drop
• Multiple File Uploadin...
Download Codes From Here (You may have to search the title of this video there) - www.codingnepalweb.com
Second Channel - bit.ly/3aHNkru
My Code Editor - • Best Text Editor for H...
Facebook - / coding.np
Instagram - / coding.np
Music Credit:
Ikson - Anywhere [Official]
• #66 Anywhere (Official)
Jimmy Hardwind - Want Me (feat. Mike Archangelo)
• Jimmy Hardwind - Want ...
Ehrling - You And Me (Vlog No Copyright Music)
• Ehrling - You And Me (...
![Rich Dunk (Ft. DaBaby) - BIG DAWG [Official Video]](http://i.ytimg.com/vi/Pz2ewsSKAEM/mqdefault.jpg)
Watch this video for multiple file uploading with drag-drop and more functionality: ruclips.net/video/_RSaI2CxlXU/видео.html
Hi can you teach us how to make the one to one chat app using React, firebase( the one you have made using PHP, mysql) Pleaseeeee...
If you are having an issue with the file not downloading locally. Make sure that all the files are in the htdocs folder in XAMPP. Then in the website address write localhost followed by your directory. So for me it was "localhost/file-upload/index.html". Hope that helps others and thank you for the great video
Well done, laid the foundation for me to build a nice and professional upload. Thank you
I will be very glad of you create a website that have admin and user dashboard at the same time using JavaScript and nodejs which less routes on the website
Thanks you the best so far
God bless you. When I get my first salary I'm going to contribute to your patreon. We need more people like you in the world.
Many many thanks to you 😀
You got the job?
@@apparatingtonowhere6007 I did, two software engineer jobs actually. However I was in crazy in debt and just payed off everything. I should be able to start on the patreon this week actually.
Bhai are you get job please tell me how to get internship in web development
Even I implemented your code in some of my office application, thank you mate
What a beautiful code. Really well done, man :)
Amaaaaaaaziiinnnnnnnggggggg !!!! Just what I needed , perfectly implemented !
Thank you so much for doing that. It is always so beautiful and good coded. Thanks
You're most welcome 😀
I'm watching ur videos and other brilliant educational content creators videos on youtube app instead of youtube vanced so I've to watch ads on ur videos which earn you guys ur revenue. Thankyou for the videos!
Many many thanks to you 😀
You are best js developer in the entire world
Your creativity ii's insane
omg so easy with xhr, surprisingly with fetch its much more difficult as it doesnt have progress event. thanks a lot
Love from Texas
Keep going☺️.
This channel is about to climb top of the mountain one day🏆✊.
Thank you so much for your compliment
awesome man.. searching for it more than a century.. finally got it.. thanks ❤️
You're most welcome 💙
Excelente! Parabéns pelo vídeo!
Thank you for demystifing progress bar.
your video always awesome & it's inspire me a lot
I had a task in my work for uploading files. You have helped me to achive my task. Thank you!
Great! If you need additional features to this file uploader like drag drop, cancel file uploading then watch this video ruclips.net/video/_RSaI2CxlXU/видео.html
Exactly what I was searching thank you
Glad I could help!
I like your videos. They are so helpful. Thank you so much.
Glad you like them!
Hope you will reach 100k soon
As always your work is so good😍..
Is it a multiple file upload or what brother😅
Love from NEPAL 🇳🇵✌️
keep it up bro ❤️ ✌️
Thank you so much 😀
Awesome Project Sir I love it
Glad you love it
Perfect 👌, greetings from Turkey.
You're most welcome
Great Job Thanks!
Wow sir it's really awesome and helpful project
Thanks a lot
Thank you so much for this amazing content.
Glad you enjoy it!
I really appreciate you for this you are really awesome 😊
My pleasure 😊
Wooyyy this is what I needed thanks
Glad to hear that 😃
Nice one brother. Thank you so much for this 👍👍👍
Any time
thank you very much for the code appreciated
Awesome, thanks Friends
Thanks for watching!
Awesome! Thx bro
Wow cool Thanks, keep it up
Thanks, will do!
Awesome man keep it up 😍
Many many thanks 🔥
Bro you're God
This was soo helpful.
But can you please make something which can get downloading progress because in mobile there is nothing special to show file is downlosd i mean it just starts downloading and we dont even know when it started so it will be very helpfull if you can tell us how to make downloading progress bar 🙏🙏
By the way thank you so much for your amazing content
🙏
Genius ❤
tks sir for thí guide
hello, Great Work, Currently I Am building my website with your video's help, Can you please make a video on how to create a mini music player?
LOVE YOU BRO 🤞🤞🤞🤞🎶🎶
Great video! Is their an easy way to access the upload files without logging in to the server?
hey, I'm from Brazil. You're awesome! I like watch your videos. Let's code!
Happy to hear that and happy coding!
Thanks alot
In a file submission form in a website. When you select a jpg file in the file input field and it goes to a progress state and it displays the image right after. Does that mean the website already got the jpg file I added even though I did not click the submit button?
I used php on android
It's work
Nice project! Was wondering if you could do a tutorial with this project where it saves to firebase when you upload a file
😋its amazing
Hi, thanks a bunch for this tutorial! And by the way im fairly new to coding. So, is there any way to make the uploaded file go into mysql database?
Storing files in a MySQL database is not recommended, as it's not designed for it. It's designed for text only. If you want to store a file DIRECTLY into a database your best option would be to encode the file using BLOB, but on larger scales and with larger files this will create performance issues due to the storing of big lengths of text and encoding/decoding them.
Your best bet would be to write the file to a directory and store the directories name (eg. file path) into the database. Make sure you change the folder permissions accordingly.
your coding knowledge amazing. Can you develope website like youtube?
You mean front end part?
hola tienes este proyecto para poder descargarlo, muchas gracias muy buen aporte
Awesome
Thank you so much
Searching this for millions of year finally found it 😃😂
Millions of year 🤣😂
@@CodingNepal 🤣
kwani. how old are you.
@@alexnganga6401 me ? I am 13 years old 😊
@@CodingFire fire founded 🤣
BBBEEESSSTTT! (Best)
Awesome!
I have a question. fileTotal = total/1000 or 1024 to get the file size in KB?
Yes, I'm divided total bytes by 1000 because 1kb = 1024/1000bytes.
good job
Thank you
one day i will be a good coder like you.
You'll be. Keep learning.
@@CodingNepal thank u bro.
Love from Jhapa 😍😍😍
Please do upload a video in ReactJS for this..
Can you record a tutorial on multiple file uploads? Thanks
Can we use js ,node js or any code without php?
Please make video on how to upload multiple file with progress bar for each selected file
Hi, The same code I have hosted in Azure blob storage but the files not storing in the path and not showing a list from that storage. I am getting a 405 error. Could you help me to fix this issue
Hi big fan
Thank you 😃
Is this a real time website i mean we can upload any no. Of files ???
Ya fir jo aap ne apne code m include ki hain bs vhi show ho rhi hain
......plz reply ....mujhe ye vdo bdi muskil se mili h jo mre lia bhot helpful ho skti h agr aap reply den toh so plz reply👆👆👆👆🙏🙏🙏🙏🙏iys an emergency 👍👍👍👍👍
👏👏👍 Repositorio ?
Hey man, how did you learn to code?
Like , more videos pls
Nice
Thank you so much
Is there a way to make this but be able to add multiple files?
It is possible that we make Progress Bar categories wise like pdf,word,jpg etc???
cool bro
Thanks bro
make a download functionality video like it.
that is great now how to take direct download link those files ?
while adding large file in uploading the entire browser getting stuck the file size can be support upto 2gb
Thank you for video . can you do a 'capture user voice for form ' video ?
Can you please explain more?
@@CodingNepal for ex. imagine we want a survey from users and one of the options is that user can capture his/her voice and sends it when presses submit button - capturing user audio using javascript -i searched youtube and could not find any video about this subject.I think it would be banger video :) .
amazing work really, can the file work with admin login password to upload file to website and how to determine where to upload on specific file on website.
Next 3 videos on javascript games plz 🙏
I've already uploaded two videos on JavaScript games.
Please watch - ruclips.net/video/pQr4O1OITJo/видео.html
ruclips.net/video/sNO5awLw9h0/видео.html
@@CodingNepal Yes But i want more 3
Hi! tried this and it works! but when I access the html on my phone using local network connection, when i upload file the upload time is slow and sometime it doesnt even finish. pls help Thank you!
Can you show us how to make a chat app using React and firebase
Thank you bro. Bro can you make this with PHP
Actually in this project I have used PHP as a backend language to receive file and save it. Only 4 lines of PHP code are used. Please watch the video.
@@CodingNepal OK thank you
sir, Please make a video on Instagram Image and video download website (how to make this type of website ) Thank you
Its my huge request please make videos with vs code.
In atom or sublime the code does not seems clear please.
The moment you opened vs code for javascript i can saw the code clearly so please use vs code 🙏🙏🙏🙏
I want o make a dynamic website of uploading the content on site ,how to do this???
Can it be entered into google Apps Script and spreadsheet?? Please help
bro can you make video on how to make uploading videos section like you tube and share file to home page of html file like you tube please i need this i do this but nothing work please can you make video on it
Nice 😚
Thanks 😃
Where did you learn html and css so well?
By watching RUclips videos, reading blogs, etc.
Sir Make a Video on Ecommerce Website on the Topic Online Clothing Store
Okay I'll think about it
There is no function where droping file updates the input?
what happen if you upload morethan 10 files, it will be scrollable or not
Sir can you create a google classroom clone or any website clones
sir you can make search engine
Upload multiple images same time not one by one ?
How could I get it to return the URL of the file so I can save it into a mongoDB database?
Bro you start js courses
Bro Image to Jpg convert kaise kare using JavaScript or php...
You have made a chat app with JavaScript PHP mysql. Can you make the same using React ??? Please
@codingnepal please
I would have liked a vertical scroll bar
You meant you liked the vertical scroll bar right..?
@@CodingNepal Yes CodeBlock
@@CodingNepal YES
i want to delete filelist, if i click them, how i modify code?
Which code editor do you use
Mostly, I use Atom but sometimes I also use VS Code