Learn Firebase Cloud Storage Quickly [Guide]
Published: 2021-07-05 14:13:51

{% youtube 31MVIwvstzs %}


[Firebase Storage](https://firebase.google.com/docs/storage) is a great way to store all the asset files for your projects in a single place.



You can store pretty much any files such as:

- **images**,
- **videos**,
- **audio**,
- **documents**, etc

You can also create folders to organize other files or folders.

Uploading files and downloading file URLs are super easy and we can easily protect them using **Firebase Storage Security Rules**, which is very similar to [Cloud Firestore Security Rules](https://softauthor.com/firebase-cloud-firestore-security-rules/).

####Table of Contents

- [Setting Up Firebase Storage](https://softauthor.com/learn-firebase-cloud-storage-quickly-guide/#setting-up-firebase-storage)
- [Choose An Image](https://softauthor.com/learn-firebase-cloud-storage-quickly-guide/#firebase-storage-choose-an-image)
- [Upload An Image](https://softauthor.com/learn-firebase-cloud-storage-quickly-guide/#firebase-storage-upload-an-image)
- [Multiple Storage Buckets](https://softauthor.com/learn-firebase-cloud-storage-quickly-guide/#firebase-storage-multiple-storage-buckets)
- [Get An Image](https://softauthor.com/learn-firebase-cloud-storage-quickly-guide/#firebase-storage-get-image-url)
- [Upload Multiple Files](https://softauthor.com/learn-firebase-cloud-storage-quickly-guide/#firebase-storage-upload-multiple-files)
- [Get All Images](https://softauthor.com/learn-firebase-cloud-storage-quickly-guide/#firebase-storage-get-all-Image-urls)
- [Delete A File](https://softauthor.com/learn-firebase-cloud-storage-quickly-guide/#firebase-storage-delete-file)
- [Firebase Storage With Authentication Demo](https://softauthor.com/learn-firebase-cloud-storage-quickly-guide/#firebase-storage-upload-Image-with-authentication)
      - [Create A New Firebase Account](https://softauthor.com/learn-firebase-cloud-storage-quickly-guide/#firebase-storage-create-new-account)
      - [Firebase Storage Structure & Security Rules](https://softauthor.com/learn-firebase-cloud-storage-quickly-guide/#firebase-storage-structure-security-rules)
      - [Upload Logged-In User’s Profile Picture](https://softauthor.com/learn-firebase-cloud-storage-quickly-guide/#firebase-storage-upload-users-profile-picture)
      - [Get Logged-In User’s Profile Picture](https://softauthor.com/learn-firebase-cloud-storage-quickly-guide/#firebase-storage-get-user-profile-picture)

###Enable Firebase Storage

**Enable Firebase Storage** by clicking the **Get Started** button after logging into the [Firebase account](https://accounts.google.com/signin/v2/identifier?passive=1209600&osid=1&continue=https%3A%2F%2Fconsole.firebase.google.com%2F&followup=https%3A%2F%2Fconsole.firebase.google.com%2F&flowName=GlifWebSignIn&flowEntry=ServiceLogin).

![alt text](https://softauthor.com/wp-content/uploads/2020/03/firebase-storage-enable-get-started-1-1024x558.png)

The default **Cloud StorageSecurity Rule** will be set to “only authenticated users can read and write data”,

Click **next**.

![alt text](https://softauthor.com/wp-content/uploads/2020/03/firebase-storage-default-security-rules-768x611.png)

Then, it gives us a warning saying that once the **Firebase Cloud Storage** bucket is created, the physical location of it can’t be changed.

![alt text](https://softauthor.com/wp-content/uploads/2020/03/firebase-storage-cannot-change-location-768x582.png)

A Cloud Storage **bucket** stores all of our files and it ties up to a physical location. For example (us-central from the screenshot above)

>*Firebase storage allows us to create multiple buckets with different locations.*

Click **done**.

![alt text](https://softauthor.com/wp-content/uploads/2020/03/firebase-storage-dashboard-2048x663.png)

###Choose An Image

Choose an image file from a user by attaching a change event to the input element with the type attribute set to file.

```HTML
<input type="file" onchange="uploadImage(e)" />
```

```JavaScript
function uploadImage(e) {
  const file = e.target.files[0]
  console.log(file);
}
```

Then, we can have access to the actual file and its information using the event object **e.target.files[0]**.

![alt text](https://softauthor.com/wp-content/uploads/2020/02/file-data-after-choosing.png)

###Upload An Image

To upload a file to the **Firebase Cloud Storage**, we need two pieces of information:

- The **location path** that we want to upload a file into, and
- The actual **File**

We can specify the location path as an argument to the **ref()** method.

```JavaScript
firebase
    .storage()
    .ref('images/' + file.name)
    .put(file);
```

This will create a folder called **images**, if it could not find one, and store the actual file inside it with the file name mentioned in the location path after the slash (/).

Then, the **put()** method uploads the file that is passed into as an argument to the given location path.

There is another way of specifying the file path, which is using **child()** method.

```JavaScript
firebase
    .storage()
    .ref('images')
    .child(file.name)
    .put(file);
```

The above code does exactly the same thing as the previous example.

This won’t work if you test it out at this point.

*This is because…*

By default, Firebase Cloud Storage has security rules in place that can ONLY allow logged-in users to read and write data. 🔒

Let’s change that.

Go to the **Storage** → **Rules** tab and change the line from:

```Javascript
allow read, write: if request.auth.uid != null;
```

To

```JavaScript
allow read, write: if true;
```

>🛑 *Warning: The above security is actually allowing anyone to read and write to the Cloud Storage bucket. I use this for demonstration purposes ONLY.*

###Multiple Storage Buckets

We can also create multiple buckets with different locations.

If you use multiple storage buckets, you will have to explicitly pass the bucket URL to the **storage()** method as an argument.

```JavaScript
firebase
    .app()
    .storage('gs://your-project-name.appspot.com/')
    .ref('images')
    .child(file.name)
    .put(file);
```

To get the bucket URL, go to **Storage** → **Files** → **URL** (can be found at the top left).

![alt text](https://softauthor.com/wp-content/uploads/2020/02/firebase-storage-bucket-url-1-2048x577.png)

###Get An Image URL

To get a single file, specify the path with the **folder** and **file** names inside the **ref()** method and run **getdownloadURL()** method on it.

[Continue Reading...](https://softauthor.com/learn-firebase-cloud-storage-quickly-guide/#firebase-storage-get-user-profile-picture)