Uploading Images to Firebase Storage in 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! kzbin.info/www/bejne/iWXdko2sgp18m6s

[@DajuSar]

what an absolute madlad

[@ronaknavadiya]

Thanks a lot !

[@errinwright]

Thank you!!

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

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

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

[@talkohavy]

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

[@harisiqbal706]

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

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

[@yadharthganesh]

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

[@plabmadeeasy]

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

[@evanbero9705]

Great, simple tutorial, Ly. Thanks!

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

[@viveknigam3003]

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

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

[@KevinJohnKiely]

Just what I needed, thank you!

[@gamerteen4153]

so many videos and FINALLY THANK YOU

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

[@aqeelshamz]

Thank you for this awesome tutorial 💙

[@sofiemanetti6747]

Excelent video! Very well explained :) Greetings from Argentina

[@honglytech]

Thanks Sofie! Also greeting from Australia

[@laceywalker2766]

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

[@honglytech]

I’m so glad it helped!

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

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

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

[@soulking6982]

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

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

[@pompompurin-g6j]

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

[@waldothedev]

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

[@Vsevolod_Gorobec]

thx man , progress was awesome!

[@alberthperez6991]

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

[@osamabinladen7827]

Thanks so much. This was a huge help.

[@ahmadmuraish1144]

Excellent, you earned a sub

[@lb9915]

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

[@chris78945]

Thank you so much for a really well explained video!

[@honglytech]

Thanks Chris

[@miguelangelcabrera2227]

great video.! help me a lot!!

[@protegous]

Thank You! This has been very helpful!

[@honglytech]

Glad it is helpful Talha

[@matheusdocarmo4150]

Thanks so much ! Worked perfectly!

[@Covuosier]

Thanks for this! Helped me out a lot.

[@honglytech]

You're welcome

[@jeevanstha57]

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

[@callumn-d846]

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

[@faouziauk1]

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

[@ahmedateeq1721]

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

[@ifeyinwakanu3956]

This is great. Much appreciated.

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

[@אביאמן]

How to use both storage and authentication together ?

[@lautarodelloni]

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

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

[@dipakraut6058]

Thank you so much, Brother🙌

[@grakify]

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

[@ankitkumarverma8214]

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

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

[@ongomobile9956]

Thank you an awesome tutorial super helpful

[@honglytech]

Glad it was helpful!

[@sebastiantamayo7779]

How do I do now for multiple files?

[@ngotrongphuc99]

can this able to choose and upload multiple images?

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

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

[@manojmenon5020]

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

[@herlloncardoso3661]

excellent video, help me a lot.

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

[@gcrisu]

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

[@gokanton6090]

Very usefull. thank you)

[@ozankurucu6261]

Thank you so much bro :)

[@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!!

[@manuelluques3433]

Great video! You saved me

[@honglytech]

Luques Manuel You’re welcome, Luques.

[@naanfromchennai-nfctamil1714]

infinite loop occurs....any solution please

[@jugal.suthar]

you made my day

[@lnmendez]

gracias, me ayudo mucho

[@vinhvinh4701]

Thanks man😉

[@ramielsonedgar2095]

Big thanks man

[@VrlHtzz]

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

[@impree8181]

is this created with react hooks or react native?

[@orarbel167]

Hooks, for example useState

[@phongsavanhmongkhonvilay3193]

is this firebase v9?

[@shahriajamankhan1760]

lovely....appreciate it ♥

[@muhammadahmadnadeem6688]

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

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

[@adamwoolf9993]

Supernice! thanks!

[@JonsonNcube]

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

[@hoanganhtufplhn355]

Thanks bro !

[@devongrey1237]

great video!

[@honglytech]

Thanks for the visit

[@Animals_clips]

Great video

[@sohamvishwas6795]

Thank you!

[@LaceyMarie333]

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

[@notfavoritemartian]

Love you man

[@sureshjangid3395]

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

[@romadebrian]

thank you very much

[@nprajwal420]

Thanks so much

[@hitman42X]

Thank You

[@Vinicius-hr3sp]

thank you

[@smithbenson3984]

good job

[@haniarafique5840]

Sir jee mouj kerdee apnay tou !!!!

[@nigushaa]

Though I'm an atheist, God bless you!

[@fmdndr]

thanks

[@mathewsjoby6455]

doesn't work

[@alamshaikh4618]

Thank uuuuu

[@MahaDeveloper]

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

[@thekha8490]

thks

[@feras3513]

i love you

[@ScorpionKingTP]

React was not necessary based on your title

[@denzelzed2775]

6 minutes to just install firebase

[@wintendedgamer2328]

G4T

[@shehanbartholomeusz7511]

thank you

[@אביאמן]

Thank you very much