SPEAKER 1: Hi, everyone. I'm Andrea from
the Firebase team and today we're going
to look at how to get started with storage on web. Why would you want to use
storage in the first place? Well, you can use it
to store and share user generated content like
images and videos, and this content is
securely uploaded directly from web browsers. The best part of all
this is, it can be done with just a few lines of code. So let's go ahead and
see how we would do this. There are many ways to include
a library in a web app. But in this video, we'll
be using NPM and a webpack. If you want more information
on how to set that up with Firebase, check out this
other Firebase Fundamental video. Let's get started. First off, let's go to
the Firebase Console and navigate to Storage. Clicking on Get
Started, we'll open a window showing the default
security rules, which allows all reads and writes
if the project was created within the past 30 days. We can go ahead and
click Next here, which will then
give us this page to pick the location for
our Cloud Storage bucket. The default is
usually fine, as it's the project's default Google
Cloud platform resource location, and it can't be
changed once you pick it. If you're not able
to pick a location, then your project already has
a default GCP resource location from being set either
during project creation or when setting up
another service like Cloud FireStore that requires
a location setting. If we go to this
Rules tab here, it'll show the default security
rules we saw earlier in initializing storage. By default, anyone, including
people not using your app, can read or write data
for the first 30 days after project creation. If you want to restrict
who can read or write data, then we'd have to change
these security rules, which we'll cover a bit later. Now we're ready to take
a look at some code. Here, I'm in my
editor and started from the same
starter code you'll have at the end
of our setup video linked in the description. Following that video involves
installing Firebase with NPM, which means you'll have
storage ready to use as well. So now in our entry
point file, index.js, we can initialize a
Firebase app after grabbing the configuration information
from our Firebase project in the Console. Make sure this configuration
includes the storage bucket URL. Next, we'll have to get
the instance of storage, which is used to
create references in the storage bucket. Every Firebase sub package
has a getter function that retrieves an
instance of a service, like storage in this case. As a side note, don't
worry about calling this get storage
function too many times as it returns the same
instance when you call it what the Firebase app. Now, lets see how to
upload, download and delete files from storage. Before doing any of that, we'll
have to create a reference, as the files in a
Cloud Storage bucket are presented in a
hierarchical structure, just like the file system
on your local hard drive. We need to create a
reference to a file in order to enable
our app to gain access to it, which then can be used
to upload, download, delete, and list files. A reference can be
thought of as a pointer to a file in the Cloud, and
references are lightweight, so you can create
as many as you need. They are also re-usable
for multiple operations. To create a reference, we'll
add in this line, which creates references from the
storage service in the Firebase app. And this reference points to
the root of the Cloud Storage bucket. So now that we have
the root reference, we can create a reference to
a location lower in the tree. Let's say we wanted to upload
a bunch of files in an images directory. We can do this by passing
images as a second argument when calling ref. And if we wanted to create a
reference to a file instead of this directory, such as
images slash sparky dot JPEG, we can pass that as
the second argument. With this code, images
ref points to images, and sparky ref points to
images slash sparky dot JPEG. With those references, we
can start uploading files. We'll use that reference and
call the PUT method, which takes files in various formats,
including via the JavaScript file and blob APIs,
Uint8 byte arrays and strings and raw,
base64, base64url or a data URL encoded string. With each file, the PUT
function will upload it to Cloud Storage. Let's say we decide to
upload using the Blob API. After running our app, we
can go to Firebase Console, navigate to Storage and
see it uploaded here. We have our Images
folder, and inside of it, we have the sparky
dot JPEG file. If we click on it, we can
see some metadata, as well as a direct link to the image. Now that we've
uploaded files, let's see how we can download them. Similar to uploading
a file, we'll first have to grab a reference. So let's use the
same one from before. To download, we'll call get
download URL on the reference. We'll get back the download
URL for the reference, and it can be downloaded
directly using an HTTP request. Alternatively, it can
be directly inserted into an image element in HTML. If the call to download fails,
we can handle that here. After uploading files, sometimes
we'll need to delete them. Perhaps those files
are outdated and we want to clear up more space
in our storage bucket, or perhaps we simply
don't need them anymore. Just like with creating
and uploading files, we'll have to
create a reference. We'll then call delete object
on the reference to delete it. Let's go back to
Firebase Console. Our sparky image
is currently here. And if we go back to
our app and run it, we can see that the file gets
successfully deleted afterward. Now that all of this is
working, let's make it secure. All of your resources
stored in Cloud Storage are protected by Firebase
Security Rules, which is a configuration
file you write to let Firebase know who
should and should not be able to access these resources. So before we're done here, let's
go into the Security Rules tab in the Console and update
those security rules. In this case, I want
the sparky image to only be writeable by a
user whose awesomeness factor is greater than 100, but anyone
should be able to view it. This is what our
rules would look like. So that's it. Storage can help
securely store and share user generated content. And we've seen today how to
upload, download and delete files. The storage JavaScript SDK
is open source on GitHub, so check that out. And there are more Firebase
Fundamentals videos if you enjoyed this one. Happy coding.
