File Upload with Progress Bar in HTML CSS & JavaScript | File Uploader in HTML, CSS & JavaScript
Вставка
- Опубліковано 20 сер 2024
- 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.codingnepa...
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 (...
Watch this video for multiple file uploading with drag-drop and more functionality: ua-cam.com/video/_RSaI2CxlXU/v-deo.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...
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
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 😀
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
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
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 Project Sir I love it
Glad you love it
Your creativity ii's insane
Love from NEPAL 🇳🇵✌️
keep it up bro ❤️ ✌️
Thank you so much 😀
You are best js developer in the entire world
Well done, laid the foundation for me to build a nice and professional upload. Thank you
awesome man.. searching for it more than a century.. finally got it.. thanks ❤️
You're most welcome 💙
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 🤣
Thank you so much for doing that. It is always so beautiful and good coded. Thanks
You're most welcome 😀
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 ua-cam.com/video/_RSaI2CxlXU/v-deo.html
Wow sir it's really awesome and helpful project
Thanks a lot
omg so easy with xhr, surprisingly with fetch its much more difficult as it doesnt have progress event. thanks a lot
Perfect 👌, greetings from Turkey.
You're most welcome
Bro you're God
Thank you for demystifing progress bar.
Amaaaaaaaziiinnnnnnnggggggg !!!! Just what I needed , perfectly implemented !
hey, I'm from Brazil. You're awesome! I like watch your videos. Let's code!
Happy to hear that and happy coding!
Awesome, thanks Friends
Thanks for watching!
Wow cool Thanks, keep it up
Thanks, will do!
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
your coding knowledge amazing. Can you develope website like youtube?
You mean front end part?
I really appreciate you for this you are really awesome 😊
My pleasure 😊
I like your videos. They are so helpful. Thank you so much.
Glad you like them!
Hope you will reach 100k soon
Wooyyy this is what I needed thanks
Glad to hear that 😃
your video always awesome & it's inspire me a lot
LOVE YOU BRO 🤞🤞🤞🤞🎶🎶
Awesome man keep it up 😍
Many many thanks 🔥
one day i will be a good coder like you.
You'll be. Keep learning.
@@CodingNepal thank u bro.
Love from Jhapa 😍😍😍
I used php on android
It's work
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!
Thanks alot
What a beautiful code. Really well done, man :)
Thank you so much for this amazing content.
Glad you enjoy it!
Nice one brother. Thank you so much for this 👍👍👍
Any time
Exactly what I was searching thank you
Glad I could help!
tks sir for thí guide
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.
while adding large file in uploading the entire browser getting stuck the file size can be support upto 2gb
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
🙏
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?
Great Job Thanks!
Genius ❤
thank you very much for the code appreciated
Awesome! Thx bro
Is there a way to make this but be able to add multiple files?
Please make video on how to upload multiple file with progress bar for each selected file
Excelente! Parabéns pelo vídeo!
Hi big fan
Thank you 😃
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 :) .
As always your work is so good😍..
Is it a multiple file upload or what brother😅
onloading error : content.js:1 Uncaught TypeError: chrome.runtime.onMessage.addListener(...) is not a function
onuploading error : image : POST (image path) 404 (Not Found)
please help[
what happen if you upload morethan 10 files, it will be scrollable or not
I want o make a dynamic website of uploading the content on site ,how to do this???
good job
Thank you
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
Next 3 videos on javascript games plz 🙏
I've already uploaded two videos on JavaScript games.
Please watch - ua-cam.com/video/pQr4O1OITJo/v-deo.html
ua-cam.com/video/sNO5awLw9h0/v-deo.html
@@CodingNepal Yes But i want more 3
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 👍👍👍👍👍
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.
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 🙏🙏🙏🙏
There is no function where droping file updates the input?
Please do upload a video in ReactJS for this..
Nice 😚
Thanks 😃
Where did you learn html and css so well?
By watching UA-cam videos, reading blogs, etc.
Sir Make a Video on Ecommerce Website on the Topic Online Clothing Store
Okay I'll think about it
Awesome
Thank you so much
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
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?
Please when I console.log xhr.upload nothing happens why.Can anyone help Please 🙏
BBBEEESSSTTT! (Best)
Upload multiple images same time not one by one ?
that is great now how to take direct download link those files ?
hi, how to upload files and that files will be send to our email
Nice project! Was wondering if you could do a tutorial with this project where it saves to firebase when you upload a file
I have created a website using HTML ,CSS and php where user can read the blog of different languages but ,I am confused that what should be the name of this project ??
You can put any suitable name for your site according to your site content.
You can put any name buddy 🤠 for example - blogyfy ( Just my suggestion )
hola tienes este proyecto para poder descargarlo, muchas gracias muy buen aporte
I would have liked a vertical scroll bar
You meant you liked the vertical scroll bar right..?
@@CodingNepal Yes CodeBlock
@@CodingNepal YES
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.
sir you can make search engine
i want to delete filelist, if i click them, how i modify code?
Hey man, how did you learn to code?
Dynamically add and remove a div which may contain multiple elements like inputfield,button,others...pls make a video because its unavailable in youtube may be.
Can you explain more?
@@CodingNepal in your video "awsome input using html and css " 1year before. That type of div add and remove dynamically and also fetch that data with efficient code....
Can it be entered into google Apps Script and spreadsheet?? Please help
How could I get it to return the URL of the file so I can save it into a mongoDB database?
Great video! Is their an easy way to access the upload files without logging in to the server?
You have made a chat app with JavaScript PHP mysql. Can you make the same using React ??? Please
@codingnepal please
😋its amazing
make a download functionality video like it.
request script for image hosting with url link
cool bro
Thanks bro
Can you record a tutorial on multiple file uploads? Thanks
file uploaded successfully but didn't received in the specified folder pleas help
Please check the path that you've provided
The uploaded files are stored in which folder?
I've created a separate folder with a files name and all uploaded files are stored in this folder. Please watch the video for more clarity.
@@CodingNepal tq
sir, Please make a video on Instagram Image and video download website (how to make this type of website ) Thank you
Can we use js ,node js or any code without php?
Nice
Thank you so much