Firebase v9 Storage in React | Upload Files to Cloud

[@jeetviramgama4392]

It's a shame that useful videos like this one don't get more likes. Thank you very much for this. Edit: I just saw that you have a playlist on react firebase. Please continue what you're doing, we need more people like you.

[@FullstackSimplified]

Thanks for your support. Really appreciate it

[@programming_tech_zone9613]

Truly, this video is so nice if i had a way to support, I will not waste a thousandth of a second

[@lokesh-webdev219]

Cleared all the confusion in just 10 mins tutorial. You are a champ bro. You truly saved my day. Thank you sooo sooo much bro.

[@FullstackSimplified]

Thanks alot for watching. Really means alot 🔥🔥

[@michealbailey6372]

This is a great video on storing images in firebase. I've been running around the internet for the past day trying to figure out how to get it done, but it seemed like all the content was out of date. This tutorial saved me a lot of trouble. Thanks again.

[@FullstackSimplified]

Really appreciate your feedback. Thanks for watching

[@itsrubydoyle]

I was having trouble with the Firebase documentation but this video has been so helpful! Thank you!

[@FullstackSimplified]

Thanks for watching 🔥

[@itsrubydoyle]

@anona lol Yeah I'm definitely having a lot of trouble getting things working - I haven't made much progress since this comment as it's hard to find good resources. Net Ninja has a good intro series on his channel, but it doesn't cover enough. His Udemy course has been really good, but it's also outdated. Would love to know if you find any good resources!

[@jeffreykolenchery1872]

Followed a lot of tutorials but this one finally worked! Thanks a lot!!

[@FullstackSimplified]

Thanks for watching. Really appreciate

[@bushcommander2205]

Dude - this worked straight away which pretty much never does! :D Subscribed : )

[@FullstackSimplified]

Thanks for subscribing. 🔥🔥🔥

[@singh03ashish]

Happy diwali sir.... Diwali pe bhi video pe kaam... Dedication level 🔥🔥🔥

[@FullstackSimplified]

Thanks alot. And happy diwali 🎇

[@jahbless8244]

Great video, you just saved my life, I was reading the documents and after a long time searching, I found your video.

[@FullstackSimplified]

Thanks for your support 🔥

[@techjourneyrecoded4114]

Thanks for the new video on Firebase v9. Great tutorial 🔥

[@FullstackSimplified]

Thank you

[@evanbero9705]

Awesome! Thank you! Man, great tutorial. I was having such a headache with v9 and combing through Firebase docs. Thank you for simplifying this. Liked and subscribed

[@FullstackSimplified]

Thanks for the support! Really appreciate it 🔥🔥

[@introvertedperson23]

wow dude this was amazing. straight to the point and easy to follow along. much appreciated, thank you!! :)

[@FullstackSimplified]

Thanks for watching 🔥🔥

[@matheuslasserre6499]

the best of the best, saved my latenight work, thank you so much!

[@FullstackSimplified]

Glad it helped! Thanks for watching

[@sujitgoswami3319]

wonderful video for IT Students.

[@marcelafelixfortis935]

thanks! much better than documentation! would love to see a version where you manipulate the metadata and also set some custom metadata

[@FullstackSimplified]

Sure! Thanks for watching

[@omonullausmonjonov6250]

Bu darsdan koʻp narsa oʻrgandim rahmat kottakon

[@tahep3906]

thanks a lot for covering this complex subject, it works flawlessly

[@FullstackSimplified]

Really glad it helped

[@sissyyayle0517]

Thanks for you excelent explain! You save me on this part of my project!! Thanks again!!

[@kritigoswami7382]

Very helpful content again 🙂

[@FullstackSimplified]

Thanks alot 🤩🤩

[@thomaschalanson8643]

Thanks very much i begin with firebase and with your tutorial it's was simple :)

[@FullstackSimplified]

Thanks for watching 🔥

[@sujitrockstar221]

Beautiful contents useful for all IT students

[@FullstackSimplified]

Thank you

[@codemedic]

Thanks a lot for making this video, Its so precise and bulk with information 🎉🎉🥳🥳👍👍.

[@FullstackSimplified]

Glad you liked it

[@danielojeda7753]

Excellent video man.. Thank you

[@FullstackSimplified]

Thanks for watching 🔥

[@DurgeshKr22]

YOU ARE A LIFE SAVER MAN!

[@FullstackSimplified]

Thanks alot for watching

[@lokesh5371]

Thank you very much dude , it works 😀👌

[@MetilmaXI]

Very useful, thank you. I followed your video and got my test-app working in minutes & was able to use that info for my intended project! May I suggest you look into using a .env file to protect your firebase credentials from showing up your public github repo? I'm hesitant to leave API keys on public repos - but that's your preference.

[@FullstackSimplified]

Yes surely you can use .env for firebase config. Just for the demonstration I have kept it public and since I have already deleted the project from my firebase console so any ways the api key won’t be usable. But thanks for observation. Really appreciated

[@gulay3203]

thank you, my app worked!

[@acemalto4202]

can you make part 2 of that using downloading data in firebase

[@knowledgegeeks3901]

you saved my life! the documentation is not clear unlike your video i have a question> what is the difference between setDoc() and the method you have used in this video

[@FullstackSimplified]

Hey thanks for your feedback!! Really appreciate it. Coming to your question setDoc is a method used in firebase firestore (not firebase storage) to add data.

[@ithen15]

can you make a video of listing all the elements in storage and downloading them ?

[@FullstackSimplified]

Sure. Stay tuned

[@immeatom]

Love the content.

[@FullstackSimplified]

Thanks for watching

[@isuruudana3330]

Thank you very much, Sir !!! you are a real lifeguard 😊😊😊

[@FullstackSimplified]

Thanks for watching 🔥

[@Jack-ss4re]

10:34 I write console.log(url) and it gives me a working url in Storage, but when doesnt work when i do setImage(url), it pass a empty string, do you know why or how can i fix that?

[@FullstackSimplified]

Please share the code snippet for the same. It will give me more clear context on this.

[@trapster6745]

thank u so much for sharing, much needed

[@FullstackSimplified]

Glad it helped. Thanks for watching

[@loxplosion95]

@@FullstackSimplified how did you get local host?

[@kosmedsuporte]

Nice video, man ! When you create functions, they receive some kind of yellow line, what extension is that one?

[@FullstackSimplified]

Bracket Pair Colorizer

[@alexanderpapashvili5347]

good tutorial! well done

[@olubiyioluga1584]

I have spent up to two days trying to figure this out. T han you so much for the video. It was amazing. I do need advice, the image is being saved in the storage however it isn't displaying in the storage, its there but i xan't see the actual image. I know it has to do with the file format from expo image picker. I need to convert it to bytes, aby ideas on how to do this? Thank you

[@FullstackSimplified]

Glad it was helpful!

[@mdtamizuddin4269]

Very useful, thank you

[@FullstackSimplified]

Thanks for watching

[@Bayazzitt]

Since there are 2 ref plugins, it gives the following error. Can you help please? import { set, ref, } from "firebase/database"; import { getDownloadURL, uploadBytesResumable, ref,} from 'firebase/storage'; Terminal : Parsing error: Identifier 'ref' has already been declared.

[@FullstackSimplified]

You can try alias named import. Something like this import { set, ref as dbRef } from "firebase/database"; import { getDownloadURL, uploadBytesResumable, ref as storageRef} from 'firebase/storage';

[@akshaikumar7966]

thank you so much ,this helped a lot

[@FullstackSimplified]

Thanks for watching

[@thecareercoach231]

Great content 👍

[@FullstackSimplified]

Thanks alot

[@jknyt]

Thank you, man!

[@kevinclayton9747]

nicely done, thank you sir

[@FullstackSimplified]

Thanks for watching!!

[@AbdulQadir0097]

Hey, this video helps me a lot, but will you please tell me how to display that picture on the web page. Like a person login from the firestore collection and authentication and how do I display his picture as a profile pic.

[@FullstackSimplified]

You can store the download url of the picture in the users collection and then use it when user logs in. There's another way if you just want to store the img for profile picture only. You can do this by simply setting the display image for your authenticated user by updating the user profile. Follow this for more - firebase.google.com/docs/auth/web/manage-users#update_a_users_profile

[@elendil4543]

God bless you , thank you brother

[@FullstackSimplified]

Thanks for watching 🔥

[@_WyreZ]

Awesome tutorial, thank you! Is it possible to access Google Cloud Storage (not Firebase Storage) using reactjs?

[@FullstackSimplified]

Typically you need to have a Backend written where you should use google cloud storage, as using it directly in your frontend will expose you secret api keys.

[@_WyreZ]

@@FullstackSimplified Makes sense. Thank you! :)

[@shrishsharma8333]

Hey There, Thanks for this solution. But please hear me out, I want to post a picture along with a caption text to firestore. so, the imageURL will be sent to storage, and caption text to firestore. but i am getting errors in doing so. can you please provide some implementation to this

[@FullstackSimplified]

You can store the image to firebase storage then get the download url. Then in the Firestore you need to store the url caption and other details you want. Then everything can be fetched from the Firestore in one go. Apart from this if you just want to have a caption to your image you can just update the meta data of the image with your custom metadata. Implementation can be found here firebase.google.com/docs/storage/web/file-metadata

[@loxplosion95]

could you do a video just like this but not for react. just for plain javascript and firebase?

[@FullstackSimplified]

Sure will do that!! Stay tuned

[@loxplosion95]

@@FullstackSimplified but please make it work. I see KZbinrs on here that do fire base tutorials and it’s 20222 but for the tutorial they are using fire base 2018

[@loxplosion95]

@@FullstackSimplified thanks!

[@danielguerrero8460]

Wow, finally, thank you very much. I have seen several videos and could not find the solution. How can we download the image with the V9?

[@FullstackSimplified]

You can directly use the download url in the img element

[@danielguerrero8460]

@@FullstackSimplified thanks you so much

[@engineermaxwel6732]

Hello Bro , Could you do a video on how to send the downloadURL to the real-time database?

[@FullstackSimplified]

Sure I'll try to make one asap

[@engineermaxwel6732]

@@FullstackSimplified I appreciate Bruh

[@Mysterio9999]

How can we fetch this image and use it along with some textual data from the database , like i want to create a card with title , image and description, so the image come from the storage but how can I use title and description which comes for the firebase store and use all this with map function to map all the cards and display them

[@FullstackSimplified]

Hi. You can store the image download url in the database along with other data you have and then you can simply use the url from the response in img src

[@hamzapaskingakhtar]

Hey man great video. I need help. I'm going to use firebase storage to upload files. But I also want to store that url into mongodb, instead of just console.log(url). How can I do that? Sorry I'm a beginner

[@FullstackSimplified]

Once you get the download Url for the uploaded file you can make a request to your backend with the URL as a payload and then in your backend you can store the same in the MongoDb. Note- Connecting your MongoDB directly to your frontend can be a security issues as you will expose your db api keys and credentials to the public

[@hamzapaskingakhtar]

@@FullstackSimplified Thanks for the reply. Another Question bro. What if I want to upload multiple files. Like Select 1 file then upload like we did here. Staying on the same page. Select another file and upload. Select 3rd file then upload. If that makes sense

[@scripter9607]

This works, however the end is cut short and retreiving the url doesnt work, ive tried it with a global variable and still doesnt work

[@FullstackSimplified]

Hi. You can take a look at the complete code of the project. Links will be in the description.

[@scripter9607]

@@FullstackSimplified I checked it out however, I still cant get to find the way to retreive the url variable outside of the function. I want to be able to add the url to a document in the firestore so I can download it into the UI latter

[@somunelavalli]

Hi i am getting error like this Permission denied. Please enable Firebase Storage for your bucket by visiting the Storage tab in the Firebase Console and ensure that you have sufficient permission to properly provision resources.

[@FullstackSimplified]

Have you set up storage in your firebase project and set the security rules ? Please follow the video from 04:10

[@tashinamgay7922]

Thank you so much for the video. Can someone tell me how to upload an image and an audio together through a single form along with a the name of the song (user specified). Something like an online music player. I've been stuck here for days pls helpp.

[@FullstackSimplified]

You have to upload them separately. Then you can store the download URL for both the files in Firestore or realtime database. Something like { name : "Song name", albumArt : , audio : }

[@tashinamgay7922]

@@FullstackSimplified thank youuu. I did just that and it worked but I've to create some sort of a pause between uploading the file and adding the doc to firestorm. Currently my adddoc and uploading runs simultaneously so an empty string gets uploaded to firestore since uploading takes some time

[@FullstackSimplified]

You need to add the doc after you receive the download url in that callback

[@anjanhr1614]

Thank you sooooooooooooooooooooooooooooo Much.

[@FullstackSimplified]

You're welcome!

[@anonymouspersonal9136]

How about if we want to have a button that downloads the file that we uploaded directly to our machine

[@FullstackSimplified]

You may try this Download

[@CodewithVoran]

Thanks buddy

[@FullstackSimplified]

Thanks for watching

[@yennhinguyen1992]

hi, i follow your instruction and got this error: "Uncaught ReferenceError: ref is not defined" at the line const storageRef = ref(storage, `/images/${image.name}`); what is wrong?

[@FullstackSimplified]

Have you imported ref from Firebase storage package?

[@dreamArmy34]

hey I want to store two images so how can i achieve that please guide me

[@FullstackSimplified]

You can select 2 images from the file picker by making it accept multiple images. Then you can loop over the selected images and call the upload function for all the selected images. Or if you want to select one photo at a time then you can open the file picker twice and upload the selected photos one by one using the same upload function

[@dreamArmy34]

@@FullstackSimplified Actually I was planning to create separate file picker for both images like profileImage and CoverImage. So will I have to create separate handleImageChange Functions ? Or it can be done in one function itself?

[@FullstackSimplified]

You can use the same function for both. Only thing you need to take care is defining different firebase path/location while uploading the photo

[@dreamArmy34]

@@FullstackSimplified Thanks!

[@filipeleonelbatista]

This video help me againd 2x

[@FullstackSimplified]

Thanks for watching again!!

[@aryangupta839]

The file is not opening when I download it from the link or directly from firebase storage. How do I fix this issue ?

[@FullstackSimplified]

It should open, can you share which type of files are you uploading

[@aryangupta839]

I tried uploading pdf and jpg. Also after uploading it shows the file size as 9B for every file I upload

[@FullstackSimplified]

Can you share the code of your upload logic ?

[@aryangupta839]

@@FullstackSimplified if (!filestemp) return; const file=filestemp[0]; console.log(file); const filename = file.name; const metadata = { contentType: `${file.contentType}` }; const sotrageRef = ref(storage, `files/${filename}`); const uploadTask = uploadBytesResumable(sotrageRef,file,metadata); uploadTask.on( "state_changed", (snapshot) => { const prog = Math.round( (snapshot.bytesTransferred / snapshot.totalBytes) * 100 ); setProgress(prog); }, (error) => console.log(error), () => { getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => { console.log("File available at", downloadURL); }); } );

[@aryangupta839]

Filestemp contains array of file I am testing it for just a single file first and that single file is taken in const named file

[@george.ferreira]

Great video. But do you know how to call the method to delete a file in this version 9?

[@FullstackSimplified]

github.com/firebase/snippets-web/blob/1c4c6834f310bf53a98b3fa3c2e2191396cacd69/snippets/storage-next/delete-files/storage_delete_file.js#L8-L20

[@george.ferreira]

@@FullstackSimplified Excellent. Thanks.

[@c-far7050]

How can i save a video in storage and call it in my react app . Where it will play like youtube. Where the files loads in chunks.

[@FullstackSimplified]

Well you can do so by transcoding your video into smaller chunks and uploading it to firebase storage. Then you can store the chunk detials in firestore and download chunks as the video progress. But this would be really expensive so i would suggest to use some 3rd party solutions like Vimeo or ziggeo. You can also use webrtc of you have your own backend

[@c-far7050]

@@FullstackSimplified thanks

[@allans1212]

Hello i have an issue the file is uploaded to my firebase store but appear 9b size and i cant open it.. can you help me?

[@FullstackSimplified]

Do check the file extension, is it corrupted?

[@crazyiron9003]

Can you do multiple image upload ? And it will be saved in an array.

[@FullstackSimplified]

You can use Promise.all to upload multiple images after selecting them

[@crazyiron9003]

@@FullstackSimplified can you please do a video for it ? It will be really helpful for us beginners. Thank you

[@uzzal74]

THANKS IT HELPED ME sUSCCRIBED

[@FullstackSimplified]

Thanks for subscribing

[@Human_Evolution-]

Well, where is the picture!? We must know how to display the image.

[@FullstackSimplified]

You can use the download url in the image element

[@Human_Evolution-]

@@FullstackSimplified Thanks.

[@aftereffectstraining7668]

good explantion

[@FullstackSimplified]

Glad you liked it. Thanks for watching

[@praisegodudeh6913]

How to import more than one picture? More than one input?

[@FullstackSimplified]

Well in firebase you can only upload 1 file at a time. If you want to upload multiple files you will have to loop over your files one by one and upload them using the loop. You can also use Promise.all to resolve the all the promises and then get an array of response

[@mohamedyoussef8835]

Awesome video +++++++++++++++++++++++ Thank you

[@FullstackSimplified]

Many thanks!!

[@akshaikumar7966]

multiple files are not getting uploaded, can you tell the solution for this, please

[@FullstackSimplified]

Firebase doesn't allow to upload multiple files. You will have to use loop to upload one by one.

[@keremesen2078]

thanks sir 31.comment

[@zhanezar]

how do i delete a folder in storage?

[@FullstackSimplified]

Hi. You can create a ref to the folder you want to delete. Then you can use deleteObject(your_ref) to delete

[@eduardosalles9212]

thanks!!!

[@thachnguyen5957]

thanks

[@kllokoq]

What happens if two files have the same name? Why isn't that really important thing addressed here? One way is to use uid of a currently authenticated user which we can get from auth.currentUser.uid. If your app has multiple files to upload such as cover letter, resume etc they should probably point to different folders. If the user reuploads any of them it will rewrite the previous file in the storage and not fill your storage with duplicates.

[@FullstackSimplified]

Authentication was not covered in this video. It was more about the basics of file uploading. For the file name you can use any thing which suits your application architecture to avoid duplicates or file over riding

[@robx_001]

you got a like

[@FullstackSimplified]

Thanks alot. Really appreciate your support 🔥

[@michaeldriscoll6047]

thank you :')

[@FullstackSimplified]

You're welcome

[@gonzalolarrica3901]

i love you

[@FullstackSimplified]

Thanks for watching

[@asharma741]

Simple tutorials are best tutorials. Keep it up! @wesome

[@FullstackSimplified]

Thanks for watching 🔥

[@qwyzex5210]

cool.

[@subhashnayak8895]

how to download the file??

[@FullstackSimplified]

Using the download URL which we get from firebase after successful uploading of file

[@subhashnayak8895]

@@FullstackSimplified thanks bro how to create sessions for users After signing in ??

[@subhashnayak8895]

Using firebase authentication

[@FullstackSimplified]

Firebase already does that for you. If you still want to override you can refer here firebase.google.com/docs/auth/admin/manage-sessions

[@subhashnayak8895]

@@FullstackSimplified thank you bro u saved me

[@simply_just_better]

My screen is now black

[@FullstackSimplified]

Hey there thanks for watching! Can you please share more info about the error!!

[@pagevpetty]

Uncaught (in promise) ReferenceError: useState is not defined

[@FullstackSimplified]

Have you imported useState from the react package? Please check