File Upload with Progress Bar in HTML CSS & JavaScript | File Uploader in HTML, CSS & JavaScript

Подписаться 229 тыс.

Просмотров 162 тыс.

50% 1

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...
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 (...

Опубликовано:

28 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 194

@CodingNepal 3 года назад

Watch this video for multiple file uploading with drag-drop and more functionality: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-_RSaI2CxlXU.html

@sribalanagasairamasasankga615 3 года назад

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...

@tusharvyavahare9229 3 года назад

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!

@CodingNepal 3 года назад

Many many thanks to you 😀

@hackerprime9722 3 года назад

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.

@CodingNepal 3 года назад

Many many thanks to you 😀

@apparatingtonowhere6007 2 года назад

You got the job?

@hackerprime9722 2 года назад

@@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.

@entertainmenttechnologygya1640 2 года назад

Bhai are you get job please tell me how to get internship in web development

@pankajrajoria6835 Год назад

Even I implemented your code in some of my office application, thank you mate

@CreativeTutorialsWeb 3 года назад

Awesome Project Sir I love it

@CodingNepal 3 года назад

Glad you love it

@gio2156 2 года назад

omg so easy with xhr, surprisingly with fetch its much more difficult as it doesnt have progress event. thanks a lot

@tankut1881 3 года назад

Perfect 👌, greetings from Turkey.

@CodingNepal 3 года назад

You're most welcome

@nandinisingh5250 Год назад

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 👍👍👍👍👍

@Pryme. 2 года назад

Is there a way to make this but be able to add multiple files?

@geextrix1538 Год назад

Thank you for demystifing progress bar.

@Bhsdk50000 3 года назад

I like your videos. They are so helpful. Thank you so much.

@CodingNepal 3 года назад

Glad you like them!

@BeastGaming88 3 года назад

I really appreciate you for this you are really awesome 😊

@CodingNepal 3 года назад

My pleasure 😊

@jcoff1000 2 года назад

Great video! Is their an easy way to access the upload files without logging in to the server?

@mubindaghost 3 года назад

Hope you will reach 100k soon

@bishwajeetpandey1570 Год назад

Please make video on how to upload multiple file with progress bar for each selected file

@theman7050 Год назад

What a beautiful code. Really well done, man :)

@Appolitics175whowin Год назад

while adding large file in uploading the entire browser getting stuck the file size can be support upto 2gb

@sribalanagasairamasasankga615 3 года назад

You have made a chat app with JavaScript PHP mysql. Can you make the same using React ??? Please

@sribalanagasairamasasankga615 3 года назад

@codingnepal please

@baluk3855 Год назад

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

@charankumar2784 2 года назад

LOVE YOU BRO 🤞🤞🤞🤞🎶🎶

@caktasnino Год назад

There is no function where droping file updates the input?

@miaowangpark Год назад

Can you record a tutorial on multiple file uploads? Thanks

@patriciovillarroel8403 3 года назад

hola tienes este proyecto para poder descargarlo, muchas gracias muy buen aporte

@kidznow1799 2 года назад

Can it be entered into google Apps Script and spreadsheet?? Please help

@vinhtran6309 Год назад

tks sir for thí guide

@Henry_Nunez 2 года назад

👏👏👍 Repositorio ?

@junayetsikder6165 3 года назад

make a download functionality video like it.

@sajadmolaee7493 3 года назад

Nice 😚

@CodingNepal 3 года назад

Thanks 😃

@sajadmolaee7493 3 года назад

Where did you learn html and css so well?

@CodingNepal 3 года назад

By watching RU-vid videos, reading blogs, etc.

@AYOX986 2 года назад

when i choose a picture nothing happens pls help

@codingwithkenny6492 3 года назад

Awesome

@CodingNepal 3 года назад

Thank you so much

@awalrajab3110 2 года назад

upload multiple files ?

@sreekuttan7168 2 года назад

how to make this by python flask

@Sunardi-zn7ec 3 года назад

Nice

@CodingNepal 3 года назад

Thank you so much

@NiteshBreaks 2 года назад

Not working

@CodingNepal 2 года назад

It works fine. Please, double check your codes

@AIR-DROPHUBINFO 3 года назад

100k from me

@prithvichoudhary7449 2 года назад

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

@lewster7id 3 года назад

request script for image hosting with url link

@lucasdelaunoit 3 года назад

Thank you so much for doing that. It is always so beautiful and good coded. Thanks

@CodingNepal 3 года назад

You're most welcome 😀

@CodingFire 3 года назад

Searching this for millions of year finally found it 😃😂

@CodingNepal 3 года назад

Millions of year 🤣😂

@CodingFire 3 года назад

@@CodingNepal 🤣

@alexnganga6401 3 года назад

kwani. how old are you.

@CodingFire 3 года назад

@@alexnganga6401 me ? I am 13 years old 😊

@bhuvneshkumar7419 3 года назад

@@CodingFire fire founded 🤣

@cristianMoraJ 3 года назад

add multiple upload file

@CodingNepal 3 года назад

Okay, I'll add this feature also if many viewers request it.

@piyushdudhat139 3 года назад

@@CodingNepal Please add multiple files upload.

@Pryme. 2 года назад

Please add multiple upload files

@rakibahmed967 3 года назад

your coding knowledge amazing. Can you develope website like youtube?

@CodingNepal 3 года назад

You mean front end part?

@shamiul_islam 3 года назад

Awesome! I have a question. fileTotal = total/1000 or 1024 to get the file size in KB?

@CodingNepal 3 года назад

Yes, I'm divided total bytes by 1000 because 1kb = 1024/1000bytes.

@thesiddiqui7 Год назад

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[

@jackofalltrades1249 5 месяцев назад

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!

@yusifme3534 Год назад

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.

@NiranjanND 3 года назад

Wow cool Thanks, keep it up

@CodingNepal 3 года назад

Thanks, will do!

@RealNaps Год назад

Thanks alot

@Ashwathama7714 3 года назад

I used php on android It's work

@NPGAMINGOfficial Год назад

Upload multiple images same time not one by one ?

@stephenasiedu76 2 года назад

Please when I console.log xhr.upload nothing happens why.Can anyone help Please 🙏

@jeenitprajapati3449 3 года назад

Living in Surkhet?

@CodingNepal 3 года назад

Yes

@moonkilsun 2 года назад

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?

@stijniman Год назад

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.

@nandinisingh5250 Год назад

I want o make a dynamic website of uploading the content on site ,how to do this???

@MuhammadLuthfiansyah-cn3rg Год назад

what happen if you upload morethan 10 files, it will be scrollable or not

@COFFY_GAMING 3 года назад

Wow sir it's really awesome and helpful project

@CodingNepal 3 года назад

Thanks a lot

@gajahmada2447 9 месяцев назад

hi, how to upload files and that files will be send to our email

@thegamerdevil6883 3 года назад

Hey man, how did you learn to code?

@gauravbhisevititanium6030 3 года назад

sir you can make search engine

@Henry_Nunez 3 года назад

I would have liked a vertical scroll bar

@CodingNepal 3 года назад

You meant you liked the vertical scroll bar right..?

@CodingFire 3 года назад

@@CodingNepal Yes CodeBlock

@Henry_Nunez 3 года назад

@@CodingNepal YES

@emmanuelgonzalez6235 3 года назад

Awesome, thanks Friends

@CodingNepal 3 года назад

Thanks for watching!

@KavitaSharma-sb8xx 3 года назад

Your creativity ii's insane

@moacirdavid3562 3 года назад

hey, I'm from Brazil. You're awesome! I like watch your videos. Let's code!

@CodingNepal 3 года назад

Happy to hear that and happy coding!

@isravel5154 8 месяцев назад

Upload multiple files 😢

@webpixels9894 3 года назад

Sir Make a Video on Ecommerce Website on the Topic Online Clothing Store

@CodingNepal 3 года назад

Okay I'll think about it

@manojmondal4465 3 года назад

file uploaded successfully but didn't received in the specified folder pleas help

@CodingNepal 3 года назад

Please check the path that you've provided

@0k1lx 3 года назад

good job

@CodingNepal 3 года назад

Thank you

@tejasHasaan 3 года назад

The uploaded files are stored in which folder?

@CodingNepal 3 года назад

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.

@tejasHasaan 3 года назад

@@CodingNepal tq

@CodingWala 3 года назад

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 🙏🙏🙏🙏

@jeenitprajapati3449 3 года назад

BBBEEESSSTTT! (Best)

@ramghamire1206 3 года назад

Love from Texas Keep going☺️. This channel is about to climb top of the mountain one day🏆✊.

@CodingNepal 3 года назад

Thank you so much for your compliment

@vishwanath-ts 2 года назад

Bro you're God

@priyankagupta3662 3 года назад

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 ??

@CodingNepal 3 года назад

You can put any suitable name for your site according to your site content.

@CodingFire 3 года назад

You can put any name buddy 🤠 for example - blogyfy ( Just my suggestion )

@RAHULROY-sb9nt 3 года назад

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.

@CodingNepal 3 года назад

Can you explain more?

@RAHULROY-sb9nt 3 года назад

@@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....

@bhanakop6772 Год назад

Bro you start js courses

@PlanetVictic 3 года назад

How could I get it to return the URL of the file so I can save it into a mongoDB database?

@mubindaghost 3 года назад

How can we make this into a downloading and uploading website such as mediafire

@anshulbindua9230 3 года назад

Hi big fan

@CodingNepal 3 года назад

Thank you 😃

@tuvshin666 Год назад

that is great now how to take direct download link those files ?

@MrAndroidianBro 3 года назад

Next 3 videos on javascript games plz 🙏

@CodingNepal 3 года назад

I've already uploaded two videos on JavaScript games. Please watch - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-pQr4O1OITJo.html ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-sNO5awLw9h0.html

@MrAndroidianBro 3 года назад

@@CodingNepal Yes But i want more 3

@raizen3030 2 года назад

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?

@yubiroaster6285 3 года назад

Love from NEPAL 🇳🇵✌️ keep it up bro ❤️ ✌️

@CodingNepal 3 года назад

Thank you so much 😀

@roshanshaw7742 3 года назад

sir, Please make a video on Instagram Image and video download website (how to make this type of website ) Thank you

@aurangzaibbugti 2 года назад

It is possible that we make Progress Bar categories wise like pdf,word,jpg etc???

@behnam7690 3 года назад

Thank you for video . can you do a 'capture user voice for form ' video ?

@CodingNepal 3 года назад

Can you please explain more?

@behnam7690 3 года назад

@@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 :) .

@ArsalanKhan-gq5np 3 года назад

Hi, To add multiple files at once, how this will be doen ?

@CodingNepal 2 года назад

I'm thinking to make video on it. Please wait!

@gtbmcollins1 2 года назад

@@CodingNepal I would like the video on multiple files also.

@CodingWala 3 года назад

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 🙏

@cmaisnam8479 3 года назад

BROTHER, HOW TO MAKE ADMIN AND USER TIME LIMITED KEY SYSTEM WITH MYSQL

@prosmusic6846 3 года назад

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?

@shuhratabdurahmonov7783 3 года назад

Thank you bro. Bro can you make this with PHP

@CodingNepal 3 года назад

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.

@shuhratabdurahmonov7783 3 года назад

@@CodingNepal OK thank you

@piuspolocha Год назад

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

@sribalanagasairamasasankga615 3 года назад

Can you show us how to make a chat app using React and firebase