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

No video

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

Рет қаралды 159,779

Күн бұрын

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

Пікірлер: 194

@CodingNepal 3 жыл бұрын

Watch this video for multiple file uploading with drag-drop and more functionality: kzfaq.info/get/bejne/lbiDlKxjqN7QiIk.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...

@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

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

@asfandiyar5829 Жыл бұрын

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

@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

@piuspolocha7948 Жыл бұрын

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

@yubiroaster6285 3 жыл бұрын

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

@CodingNepal 3 жыл бұрын

Thank you so much 😀

@CreativeTutorialsWeb 3 жыл бұрын

Awesome Project Sir I love it

@CodingNepal 3 жыл бұрын

Glad you love it

@NetDaimoku 11 ай бұрын

Well done, laid the foundation for me to build a nice and professional upload. Thank you

@kousikraj4597 3 жыл бұрын

awesome man.. searching for it more than a century.. finally got it.. thanks ❤️

@CodingNepal 3 жыл бұрын

You're most welcome 💙

@KavitaSharma-sb8xx 3 жыл бұрын

Your creativity ii's insane

@COFFY_GAMING 3 жыл бұрын

Wow sir it's really awesome and helpful project

@CodingNepal 3 жыл бұрын

Thanks a lot

@lucasdelaunoit 3 жыл бұрын

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

@CodingNepal 3 жыл бұрын

You're most welcome 😀

@attiqurrehman4142 2 жыл бұрын

You are best js developer in the entire world

@zorbak5090 3 ай бұрын

I had a task in my work for uploading files. You have helped me to achive my task. Thank you!

@CodingNepal 3 ай бұрын

Great! If you need additional features to this file uploader like drag drop, cancel file uploading then watch this video kzfaq.info/get/bejne/lbiDlKxjqN7QiIk.html

@tankut1881 3 жыл бұрын

Perfect 👌, greetings from Turkey.

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

@moacirdavid3562 3 жыл бұрын

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

@CodingNepal 2 жыл бұрын

Happy to hear that and happy coding!

@spectrumcodes Жыл бұрын

Amaaaaaaaziiinnnnnnnggggggg !!!! Just what I needed , perfectly implemented !

@Bhsdk50000 3 жыл бұрын

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

@CodingNepal 3 жыл бұрын

Glad you like them!

@geextrix1538 Жыл бұрын

Thank you for demystifing progress bar.

@emmanuelgonzalez6235 3 жыл бұрын

Awesome, thanks Friends

@CodingNepal 3 жыл бұрын

Thanks for watching!

@gio2156 2 жыл бұрын

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

@theman7050 Жыл бұрын

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

@DoLittleWithPalash 3 жыл бұрын

your video always awesome & it's inspire me a lot

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

@The_OnlyWarrior 3 жыл бұрын

Awesome man keep it up 😍

@CodingNepal 3 жыл бұрын

Many many thanks 🔥

@vishwanath-ts 2 жыл бұрын

Bro you're God

@reivan_ 3 жыл бұрын

Wooyyy this is what I needed thanks

@CodingNepal 3 жыл бұрын

Glad to hear that 😃

@NiranjanND 3 жыл бұрын

Wow cool Thanks, keep it up

@CodingNepal 3 жыл бұрын

Thanks, will do!

@rakibahmed967 3 жыл бұрын

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

@CodingNepal 3 жыл бұрын

You mean front end part?

@VictorOscar-fp7ge Жыл бұрын

Nice one brother. Thank you so much for this 👍👍👍

@CodingNepal Жыл бұрын

Any time

@mubindaghost 3 жыл бұрын

Hope you will reach 100k soon

@BeastGaming88 2 жыл бұрын

I really appreciate you for this you are really awesome 😊

@CodingNepal 2 жыл бұрын

My pleasure 😊

@mdmasrurrahmansakib6764 2 жыл бұрын

Thank you so much for this amazing content.

@CodingNepal 2 жыл бұрын

Glad you enjoy it!

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

@kc9853 2 жыл бұрын

Exactly what I was searching thank you

@CodingNepal 2 жыл бұрын

Glad I could help!

@shubhammeshram9570 3 жыл бұрын

As always your work is so good😍.. Is it a multiple file upload or what brother😅

@Pryme. 2 жыл бұрын

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

@nirajmurmu2908 3 жыл бұрын

one day i will be a good coder like you.

@CodingNepal 3 жыл бұрын

You'll be. Keep learning.

@nirajmurmu2908 3 жыл бұрын

@@CodingNepal thank u bro. Love from Jhapa 😍😍😍

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

@evilaniocampos3572 2 жыл бұрын

Excelente! Parabéns pelo vídeo!

@dailypromos6477 2 жыл бұрын

Great Job Thanks!

@jcoff1000 2 жыл бұрын

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

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

@user-xz5oz 2 жыл бұрын

Awesome! Thx bro

@ahmedbakhach2490 Жыл бұрын

Genius ❤

@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

@itsagirl5240 2 жыл бұрын

thank you very much for the code appreciated

@thegamerdevil6883 3 жыл бұрын

Hey man, how did you learn to code?

@vinhtran6309 Жыл бұрын

tks sir for thí guide

@anshulbindua9230 3 жыл бұрын

Hi big fan

@CodingNepal 3 жыл бұрын

Thank you 😃

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

@charankumar2784 2 жыл бұрын

LOVE YOU BRO 🤞🤞🤞🤞🎶🎶

@jackofalltrades1249 4 ай бұрын

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!

@Ashwathama7714 3 жыл бұрын

I used php on android It's work

@RealNaps Жыл бұрын

Thanks alot

@sajadmolaee7493 3 жыл бұрын

Nice 😚

@CodingNepal 3 жыл бұрын

Thanks 😃

@sajadmolaee7493 3 жыл бұрын

Where did you learn html and css so well?

@CodingNepal 3 жыл бұрын

By watching KZfaq videos, reading blogs, etc.

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

@himanisharma1742 2 жыл бұрын

Can we use js ,node js or any code without php?

@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

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

@0k1lx 3 жыл бұрын

good job

@CodingNepal 3 жыл бұрын

Thank you

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

@bishwajeetpandey1570 Жыл бұрын

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

@MrAndroidianBro 3 жыл бұрын

Next 3 videos on javascript games plz 🙏

@CodingNepal 3 жыл бұрын

I've already uploaded two videos on JavaScript games. Please watch - kzfaq.info/get/bejne/preiZ7JitK-4eqM.html kzfaq.info/get/bejne/qbR_aMSosd2dmGQ.html

@MrAndroidianBro 3 жыл бұрын

@@CodingNepal Yes But i want more 3

@jeenitprajapati3449 3 жыл бұрын

BBBEEESSSTTT! (Best)

@webpixels9894 3 жыл бұрын

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

@CodingNepal 3 жыл бұрын

Okay I'll think about it

@aurangzaibbugti 2 жыл бұрын

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

@yassinsconcepts 2 жыл бұрын

Nice project! Was wondering if you could do a tutorial with this project where it saves to firebase when you upload a file

@codingwithkenny6492 3 жыл бұрын

Awesome

@CodingNepal 3 жыл бұрын

Thank you so much

@nandinisingh5250 Жыл бұрын

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

@Appolitics175whowin Жыл бұрын

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

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

@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

@ishanmaduranga6459 2 жыл бұрын

Please do upload a video in ReactJS for this..

@sribalanagasairamasasankga615 3 жыл бұрын

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

@sribalanagasairamasasankga615 3 жыл бұрын

@codingnepal please

@patriciovillarroel8403 3 жыл бұрын

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

@gauravbhisevititanium6030 3 жыл бұрын

sir you can make search engine

@MuhammadLuthfiansyah-cn3rg Жыл бұрын

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

@NPGAMINGOfficial 11 ай бұрын

Upload multiple images same time not one by one ?

@kidznow1799 2 жыл бұрын

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

@miaowangpark Жыл бұрын

Can you record a tutorial on multiple file uploads? Thanks

@wulfguitar106 2 жыл бұрын

😋its amazing

@Henry_Nunez 2 жыл бұрын

👏👏👍 Repositorio ?

@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

@dineshchandrapandey1182 3 жыл бұрын

Which code editor do you use

@CodingNepal 3 жыл бұрын

Mostly, I use Atom but sometimes I also use VS Code

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

@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

@Sunardi-zn7ec 3 жыл бұрын

Nice

@CodingNepal 3 жыл бұрын

Thank you so much

@caktasnino Жыл бұрын

There is no function where droping file updates the input?

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