File Management with Firebase Storage

In this chapter, we will cover the following recipes:

• Creating file storage references
• Implementing file upload
• Implementing file serving and downloading
• Implementing file deletion
• Implementing file metadata updates
• Firebase file storage error handling

Introduction

Just like any good build application, uploading files and saving/serving them is a traditional, well-established workflow where you typically have different methods to save your files. So in this chapter, we're going to see how we can implement one of the coolest added functionalities and talk about file storage.

File storage in Firebase lets you upload, download, and do your basic CRUD (create, read, update, and delete) functionalities using really simple and straightforward APIs. Also, Firebase file storage is robust, secure, and scalable like the rest of the Firebase service suite.

Creating file storage references

As you can see, everything we do in Firebase starts with creating a reference. That way, we can have a well managed and separated workflow across the different parts of our apps.

Getting ready

Before getting started with the code we need to confirm the presence of the following configuration:

1. That you have a Firebase project, and you've properly configured it, if this is not the case, please check Chapter 1, Firebase - Getting Started, for that.
2. you need to make sure that the "storageBucket" field is present with its bucket link, this one will be the place where all your files will live underneath.

...

Implementing file upload

We're going to cover how we can we implement file upload in our application following a really cool example we're going to build

The example contains one single application with a button that will open the file picker. Once the file is selected the Upload process will start, so let's see how we can make this process happen.

How to do it...

1. To upload a file, we need to first create a new reference to the created file. We already know that we got a reference to the root folder, as we saw it earlier in this chapter. The code for creating a new reference to the created file is as follows:

      //Creating a new reference for the uploaded file.
      let imageRef = packtRef.child(`images...

Implementing file serving and downloading

In the previous recipe, we discussed how we could upload files to the Storage bucket. In this part of the chapter, we're going to see how we can deliver and download our files directly from the Storage bucket.

How to do it...

Typically, we don't have a way to showcase all the files we have within our bucket. We do have files and folders in Firebase; however there's no API to showcase folders, but only to showcase files.

Bear in mind that the notion of folders doesn't have a meaning within the platform. This means that there's nothing called a folder within the API or logic--it's just a basic path reference to our files.

Thus, we need to have our own custom...

Implementing file deletion

Up until now, we have managed to upload and download our files from the Storage bucket, but sometimes we really want to delete the files we uploaded previously. This is doable using the Firebase Storage bucket APIs we used in the previous two sections.

How to do it...

1. As we discussed in the previous chapters before we do anything we need to grab ourselves a reference for the wanted file, so let's do that! The code for creating a reference is given as follows:

      //Getting the Root Folder Reference.
      var rootRef = firebase.storage().ref();
      var imageRef = rootRef.child('images/<image-name>.  
       <image-ext>');

2. Now let's use a special method or function...

Implementing file metadata updates

So typically, any kind of file--or folder for that matter--has what we call metadata. That vital information is present to help recognize the nature of the file and its type. It's what we normally refer to for adding MIME types, and files in the Firebase Storage bucket are no exception. Within the platform, the possibilities present are let us retrieve and also update the file's metadata, and in this recipe, we're going to see how we can do just that.

How to do it...

1. Let's start first with retrieving metadata. To allow us to do so, the Firebase APIs provide us with a function called getMetadata(). This function will allow for the retrieving of all file metadata in one...

Firebase file storage error handling

If you're serious about your next big product or application, you will instantly recognize that the proper showcasing of error on the client side is a serious and urgent matter. In this recipe, I will demonstrate how you can get and read Firebase Storage errors properly.

If you recognized the pattern we used throughout the recipes, you will probably find out--even if you're not familiar with JavaScript's promises--that we're getting all our error message from Firebase in the catchphrase.

JavaScript promise APIs are relatively new APIs shipped in the ES2015. You can read more about them, and how you can implement them within your own code, here: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise.

...