Upload files and Images to Firebase and retrieve a downloadable URL in Angular

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.

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.
Image for post
Image for post

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.

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.

Image for post
Image for post
Before upload with default image
Image for post
Image for post
While uploading
Image for post
Image for post
After uploading

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.

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store