Uploading Images to Firebase Storage in ReactJS

I will be showing how to upload and store images in firebase using ReactJS. Let's enjoy this video!
Click to Subscribe: bit.ly/Subscribe-Hong-Ly & turn on notifications to find out when I upload new videos.
GitHub Repo
github.com/lyhd/reactjs/tree/...
GitHub Pages URL: lyhd.github.io/reactjs/
Netlify URL: vigilant-noether-4942ba.netli...
Website Used
www.npmjs.com/package/firebase
firebase.google.com/
G7X Mark II Camera: amzn.to/37sTdps
Website: www.hongly-portfolio.com
Medium: / lyhong.rupp
Facebook: profile.php?...
Facebook Page (Think): / kitthink
#firebase #uploadimage #reactjs

[@honglytech]

Since I have been receiving requests on how to upload multiple images to Firebase, I decided to create this new tutorial. Hope you like it!
czcams.com/video/S4zaZvM8IeI/video.html

[@DajuSar]

what an absolute madlad

[@ronaknavadiya]

Thanks a lot !

[@errinwright]

Thank you!!

[@harisiqbal706]

this whole series is just awesome, covers everything you should know about react with firebase, really appreciated. ❤

[@perebiakpara6609]

You actually don't know how long i've been looking for this 😭❤️. I really appreciate it

[@honglytech]

You're welcome, Pere. I'm happy that it helped! :)

[@gamerteen4153]

same this video helped a lot

[@shannon-daygrant8754]

One of the few tutorials that I've followed that has gone off without a hitch. Kudos to you! Merci from Montréal.

[@shannon-daygrant8754]

Constructive criticism might be: you could explain in more detail what every aspect of the codebase is doing. But you get props for code that works! Many thanks.

[@thetruereality2]

Thank you very much, this helped a lot after lots of searching I came across this video and its probably the simplest possible expanation there is.
I particularly liked it because its done without axios or doesn't require any cloud functions or anything so thank you

[@viveknigam3003]

Thanks a lot man! You covered all the essentials which were needed! ♥

[@andresvargas8562]

Thank you so much... I came here because the Library called react-firebase-file-uploader didn't work due to a (couldn't find the module ERROR)... But your code does exactly the same... I just modified it a little in order to adapt it to my project... But I wouldn't be possible without your excellent explanation

[@honglytech]

Glad that it helps :)

[@yuukotombo6578]

Great breakdown. I was able to find my error with this quick video! Very straight forward example.

[@honglytech]

I'm glad to hear that, Yuuko.

[@evanbero9705]

Great, simple tutorial, Ly. Thanks!

[@alberthperez6991]

You're a genius, just what I was looking for, thank you very much.

[@yadharthganesh]

a thousand thanks bro. i was searching exactly for this..u made my day bro

[@KevinJohnKiely]

Just what I needed, thank you!

[@Andres-jc6hr]

Man, thank you so much, it was a big help for me!👊👍

[@gamerteen4153]

so many videos and FINALLY THANK YOU

[@plabmadeeasy]

Thanks for making these videos . You’re a star!

[@chris78945]

Thank you so much for a really well explained video!

[@honglytech]

Thanks Chris

[@aqeelshamz]

Thank you for this awesome tutorial 💙

[@matheusdocarmo4150]

Thanks so much ! Worked perfectly!

[@ifeyinwakanu3956]

This is great. Much appreciated.

[@osamabinladen7827]

Thanks so much. This was a huge help.

[@Vsevolod_Gorobec]

thx man , progress was awesome!

[@bluewetball]

This helped me figure out what I was doing wrong, so thanks!

[@laceywalker2766]

This was so helpful for my project!!!!!!! Thank you so much!!!

[@honglytech]

I’m so glad it helped!

[@grakify]

You're a genius!! Thanks so much :D

[@talhamunir5466]

Thank You! This has been very helpful!

[@honglytech]

Glad it is helpful Talha

[@Covuosier]

Thanks for this! Helped me out a lot.

[@honglytech]

You're welcome

[@lautarodelloni]

Thank you so much!! You're awesome!! :D

[@lb9915]

thanks for the great video. Saved me a ton of time.

[@ahmedateeq1721]

THANK YOUUUUUU, you made my life easier !!!!

[@dipakraut6058]

Thank you so much, Brother🙌

[@ongomobile9956]

Thank you an awesome tutorial super helpful

[@honglytech]

Glad it was helpful!

[@miguelangelcabrera2227]

great video.! help me a lot!!

[@waldothedev]

Thanks for the tutorial, I have a question, how do you implement a function to cancel or pause the upload in React?

[@ahmadmuraish1144]

Excellent, you earned a sub

[@sofiemanetti6747]

Excelent video! Very well explained :) Greetings from Argentina

[@honglytech]

Thanks Sofie! Also greeting from Australia

[@ozankurucu6261]

Thank you so much bro :)

[@gokanton6090]

Very usefull. thank you)

[@herlloncardoso3661]

excellent video, help me a lot.

[@adamwoolf9993]

Please can you explain how to then download all the image urls as an array and print the images on the screen like a photo gallery?

[@jugal.suthar]

you made my day

[@ramielsonedgar2095]

Big thanks man

[@chavorrukin]

Thank you for this tutorial. This worked almost perftectly for me, but the url inside my .then is returning "undefined". Has anyone ran into that issue?

[@romelurbay1716]

Hi. When I upload an image or video the second time to Firebase, the first image or video that was uploaded is no longer displayed. this is fixed when the file is uploaded with another name, but is there another way to fix it? thanks in advance 🙏

[@adamwoolf9993]

Supernice! thanks!

[@youssefb581]

I get the folowing error when trying it in production: Firebase Storage: No default bucket found. Did you set the 'storageBucket' property when initializing the app? (storage/no-default-bucket)
It works perfectly fine in localhost, any reason why this happens?

[@hoshiyomineedmoresuitamin5489]

Hi i have a question should we upload file such as image at client to storage cloud and take down url after that we send url to server to store url in database ? i think it a bit faster or less security?

[@Animals_clips]

Great video

[@shahriajamankhan1760]

lovely....appreciate it ♥

[@manuelluques3433]

Great video! You saved me

[@honglytech]

Luques Manuel You’re welcome, Luques.

[@vinhvinh4701]

Thanks man😉

[@hoanganhtufplhn355]

Thanks bro !

[@JonsonNcube]

THANK YOU!!!!!! #Subscribed!!!

[@notfavoritemartian]

Love you man

[@ngotrongphuc99]

can this able to choose and upload multiple images?

[@devongrey1237]

great video!

[@honglytech]

Thanks for the visit

[@user-in3ju6ej3p]

How to use both storage and authentication together ?

[@ankitkumarverma8214]

When I try to load firebase url in img tag cross origin bad request error comes

[@sohamvishwas6795]

Thank you!

[@user-in3ju6ej3p]

Thank you very much

[@VrlHtzz]

I just loooooooooooooooooooooooovvvvvvvvvvvveeeeeeeeeeeeeeeeee
You 😭😭
You saved me from something you can't even imagine 😍 it worked for me 😭
Thank you brother 🙏👊👍

[@soulking6982]

Thank u very much. Can u aslo tell how mush space firebase storage has. Btw thank 🙏❤u

[@sebastiantamayo7779]

How do I do now for multiple files?

[@Human_Evolution-]

What if I already have a Firebase project going with a collection of text data, how do I then add image uploads as well? Starting from scratch seems to be different. I spent 2 hours failing from Pedro's tutorial earlier today. I like your video although that one handler function looks way too long.

[@rifaniriyas5197]

when i try to load image in firebase i am getting error in arduino ide as uploading picture...invalid http or url error ...plz clear the doubts ...

[@lnmendez]

gracias, me ayudo mucho

[@manojmenon5020]

hello brother,please tell me the maximum images that can be stored in firebase.Please i need to know for important purpose

[@crazycode2578]

Dear Sir. I really like your video.
But when I uploaded image to firebase storage then GET image by URL, it occurred bug CORS blocked. Can you fixed me this bug? I have spent all day to fix this bug but it go nowhere. Thanks

[@romadebrian]

thank you very much

[@nidhishettigar6981]

as i imported storage i got this error, please help.
ERROR in ./src/fire.js 3:0-32
Module not found: Error: Package path . is not exported from package E:\e-buddy-for-rescued-child-labour\ebuddy-portal
ode_modules\firebase (see exports field in E:\e-buddy-for-rescued-child-labour\ebuddy-portal
ode_modules\firebase\package.json)

[@Artisticanand]

hai sir ,can u please help me i write this code inside a class component ,so usestyles showing some errors
what are the changes i have do remove the errors.problems are
1)Line 46:5: 'setImage' is not defined no-undef
Line 51:25: 'image' is not defined no-undef

[@sawyerlightsey3709]

Sounds like you didn't define the useState hooks. 10:00 into the video, line 6 is where he defines it.

[@feras3513]

i love you

[@smithbenson3984]

good job

[@hitman42X]

Thank You

[@abdallahjabermohamad3147]

thanks a lot , but how can i store the image as a ref to the current user ( profile picture ) and it only relate to this guy ...

[@naanfromchennai-nfctamil1714]

infinite loop occurs....any solution please

[@muhammadahmadnadeem6688]

Facing An Error Of UpdateTask.on Is Not a function Any One pLz Help

[@monstertuk92]

Hello because the value "e" marks me an error: Parameter 'e' implicitly has an 'any' type.ts(7006)
I wrote it the same as in the video.

[@cactuxjuice3606]

const handleChange = (e: React.ChangeEvent) => {... try this

[@LaceyMarie333]

thank you so much!!!!!!!!!!!!!!!!!!!!

[@Vinicius-hr3sp]

thank you

[@gcrisu]

I could not change my rule in Firebase. Really wish this could work for me.

[@callumn-d846]

Nice and clear. How would you approach uploading multiple files?

[@faouziauk1]

I was looking into that also, any guidance would be fantastic!

[@sabrinaakbar5348]

Can you please make a video of displaying all the images stored in the firebase using react? Or how to use the libraries which do that. Thanks :)

[@honglytech]

Thanks for your suggestion, Sabrina. Noted!!

[@jeevanstha57]

please make a video on multiple image to firebase firestore with user name and render according to user name like facebook,insta...

[@phongsavanhmongkhonvilay3193]

is this firebase v9?

[@fmdndr]

thanks

[@impree8181]

is this created with react hooks or react native?

[@orarbel167]

Hooks, for example useState

[@sureshjangid3395]

User does not have permission to access 'product-image/camra.png'. (storage/unauthorized

[@alamshaikh4618]

Thank uuuuu

[@thekha8490]

thks

[@talkohavy]

OUTDATED !!!
Guys,
look for "Firebase v9 Storage in React | Upload Files to Cloud
" tutorial video.

[@nelsonomoro8591]

If you are getting an error trying to import Storage when using firebase v9
Watch the videos below:
Link to import firebase/storage - shrinke.me/sFdh2B
Link to import firebase/firestore - shrinke.me/COlYPZ

[@haniarafique5840]

Sir jee mouj kerdee apnay tou !!!!

[@mathewsjoby6455]

doesn't work

[@nigushaa]

Though I'm an atheist, God bless you!

[@ScorpionKingTP]

React was not necessary based on your title

[@MahaDeveloper]

Le Stack overflow*
Let's just declare this as deprecated.
stackoverflow.com/questions/41352150/typeerror-firebase-storage-is-not-a-function

[@wintendedgamer2328]

G4T

[@denzelzed2775]

6 minutes to just install firebase

[@shehanbartholomeusz7511]

thank you

[@nprajwal420]

Thanks so much