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.