Introduction

In the previous article , I explained how to set up Firebase in your Angular application. In this article, I am going to explain how to upload images or any other files to the Angular storage and get a downloadable URL which can be used to view the image back in the application or to save the URL in Firebase Database or in another Server side Database.

As per the previous article, we imported AngularFireDatabaseModule to enable Firebase’s' database functions (along with Firestore) in the module. But, as we want to upload files / images and save them, we cannot use the database and instead we can use the storage functions provided by Firebase.

Getting Started

First of all, if you have not already set up firebase in your angular application, please refer to my previous article “Set up Firebase in Your Angular App for the First Time” and follow the whole steps in Step 1 and Step 2 completely in that article. If you have done all that, you are eligible to continue here on.

Step 1( Activate Firebase Storage )

1. Go to your firebase console online and open your firebase-project’s console.
2. Follow the steps in the image below going to Storage - → Rules - → edit rule to ‘'true” and publish.

Here we allow writing, you can customize rules later as per your need.

Step 2 (Configurations in Angular App)

1. . You have to import AngularFireStorageModule in app.module.ts as below to enable the storage functions.

Step 3 (Getting the downloadable URL after upload)

I have created a component using the command ng g c fileuploader.

1. I create a file input button which accepts only image types..

Here, in <img> tag, I have used onerror attribute to load a default image when there is no image uploaded.

When an image is selected, it is automatically uploaded to the storage and image is viewed after upload is completed.

2. Edit the .ts file as below

Here, in line 13, a folder named “images " is created in the storage and uploaded files are saved in that folder as defined by the filePath in line 25.

Line 26 - → FireStorage.upload(<path>,<file>) method returns an AngularFireUploadTask which comprises of several information and useful methods about the uploading task. We use this task to get the downloadable url as shown in line 31.

3. Now you can run the project and upload an image.

Step 4 (Showing a progress bar while uploading)

IF you need a progress bar , you can add it too. I use default progress view in html here. You can customize the progress bar after learning the basic process.

1. I edit my html file and add some new lines as below for the progress bar

2. Edit the .ts file as below and add the new lines I shown in comments. ( Line 18 and line 32 )

Here also, I have used the task to get the uploading percentage which returns an Observable<number> . (Do not try to log those values in console as it is useless..) .

3. Hurrah , You are good to go. Hurry run the app and see by yourself.

Conclusion

Here, you could learn what modules needed to be imported when using FireStorage and learn about the AngularFireUploadTask which is retuned as a result of AngularFireStorage.upload() method. AngularFireUploadTask gives us very useful methods to handle the uploading process and I used only two of them in this article but there are other methods to pause, stop or resume the uploading process. It is up to you to play with them.

A note from JavaScript In Plain English:

We are always interested in helping to promote quality content. If you have an article that you would like to submit to JavaScript In Plain English, send us an email at submissions@javascriptinplainenglish.com with your Medium username and we will get you added as a writer.