Check out a free preview of the full Firebase with React, v2 course:
The "Firebase Storage" Lesson is part of the full, Firebase with React, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Steve adds the ability to upload a file to the application using Firebase storage.

Get Unlimited Access Now

Transcript from the "Firebase Storage" Lesson

[00:00:00]
>> Steve Kinney: All of that work was to get us to the point where we can now see the changes to the user, which is that like nice feedback loop, right. What we wanna do is we wanna work on storage. We wanna make it so that the user can find a new, I mean I like that picture, I took it last week, it's fine.

[00:00:16] What we wanna do is we wanna do is we wanna, so we can take a new picture and upload it, we can store it in a storage bucket somewhere. Get the URL from where we stored that file, and use that as the new photo URL, right. This also means our email users can have nice pictures too, all right.

[00:00:35] So to do that, back into the Firebase JS,
>> Steve Kinney: And we're gonna pull in one more,
>> Steve Kinney: firebase/storage. We do something similar to what we've done in the past now.
>> Steve Kinney: Up here or also export const storage = firebase.storage. Let’s get this wired up into the user profile page.

[00:01:14] So we can bring in Firestore, we can bring in storage.
>> Steve Kinney: Have both in place. Let me give myself one more helper which is, cuz I'm gonna be really honest with you, I can barely ever remember the file API. MDN is my, Mozilla Developer Network is my friend every single time.

[00:01:37] So if image input is not null, then get me this.imageInput.files, and just get me the first one. Theoretically I guess they can select multiple files, but I don't know what I would do with multiple files, I'm just replacing one picture. So we'll just grab the first one out of there.

[00:02:03] And when they submit the form, we know that we're gonna, if there is a display name we're going to change the display name.
>> Steve Kinney: If there is a file that they've selected, then we're gonna go to storage. And storage also uses references to where they are. So storage.ref is the top of the bucket, right, and then we can kind of navigate in.

[00:02:32] So I can say child and let's call this, we'll put in, user-profiles Bucket, that seems good. But then I'm thinking we'll have a folder for each user, right, based on their UID. This will be really useful cuz guess what also has security rules? Firebase storage, right, Firebase storage also has security rules.

[00:02:59] So what we'll do is, then we can use the security rules to say, hey user, you only have access to the folder that has your UID on it. So I'll say, .child(this.uid), I made that computer property before.
>> Steve Kinney: And we'll do one more, which is like, we also need to name the file.

[00:03:21] Luckily, I'm gonna cheat with that one, this.file.name.
>> Steve Kinney: So this will give me a reference to the top of the bucket slash user profiles, slash their user ID slash the name of the file they tried to upload, right. That way they can upload multiple files.
>> Steve Kinney: This could be useful, in this case they're gonna have one profile picture.

[00:03:46] But you can imagine a world where maybe they could have multiple images or something else that they upload. And then, everyone ready for the hard work of putting file in the bucket? Wanna take a lucky guess at the method to put a file in a bucket is?
>> Speaker 2: Save.

[00:04:01]
>> Steve Kinney: Upload.
>> Speaker 2: Upload.
>> Steve Kinney: Save file.
>> Speaker 2: Save.
>> Steve Kinney: Put a file in a bucket, it's put.
>> Speaker 2: Store.
>> Steve Kinney: [LAUGH] We tried. [LAUGH]
>> Speaker 2: Store.
>> Steve Kinney: Put.
>> Speaker 2: Put.
>> Steve Kinney: We'll put this.file in the bucket.
>> Steve Kinney: So that is gonna return a promise. I'm actually gonna just use promise chaining cuz this is already,

[00:04:26]
>> Steve Kinney: The response is gonna give me a whole bunch of stuff on it. What I really, it's gonna give me a reference, what I really want is the response.ref.
>> Steve Kinney: The getDownloadURL. The download URL is the full URL to where it is on the Internet, right. There are more relative one to this bucket and all these other things in case you, this is the full, this is the URL for this image.

[00:04:56] So I'll grab that. And then I'll say photoURL this is a way that keeping the user ref stored for usability it's useful. I'll say update,
>> Steve Kinney: photoURL.