Upload and View Files in Firebase Storage using Angular + Firebase Realtime Database

Photo by Mitchell Luo on Unsplash

Firebase is a comprehensive app development platform.. It helps us to build apps with more efficiency and quality.. It can work as a back-end to our application where we can run our services.. It also has Firebase extensions from which you can deploy functionalities to your app using pre-packaged solutions.. With all this Firebase is a stand out among current technologies.

If you are interested in knowing more about Firebase, click the following link to be directed to the Firebase official site where you could enhance your knowledge and awareness regarding it.

https://firebase.google.com/

It is now time for us to create our Firebase project. In the above link you will find the option ‘Get Started’. With your google account credentials you will be able to maintain your Firebase account. So once you get to the Firebase console select the option ‘Add Project’.

Creating a project is a 3 step process. In the 1st step you need to give a project name. In the 2nd step it will ask whether we need to add Google analytics to our project.. For the moment we can say ‘No’ as this is a sample project.. But you can use Google analytics in your future projects. If we do not add Google analytics the 3rd step will be automatically skipped as in the 3rd step we need to give the email account where we need the Google analytics updated. Now we have created our Firebase project.

Now we can select the option ‘Web’ to create a web app. Then we need to give the app a name.. With that we have created our web app as well.

On your left sidebar you will find the option ‘Database’. On the initial click they will ask about the database rules.. For the moment we will select the option ‘Test Mode’. This will allow access to public read and write. But after finished developing we can change the rules.. So for now it is not something to worry..

Now from top you need to select the option ‘Realtime Database’. Then you can find the tab ‘Rules’. Once you go to that tab your rules must be as below. If not, change it to be as below and publish the changes.

Next is to create our storage.. For that select ‘Storage’ from the left sidebar. At the initial selection you will be asked to get started and in the 1st step you can select ‘Next’. In the 2nd step you need to set the cloud storage location. With that you will get your storage. Then go to the tab ‘Rules’ in it and do the below changes.. Once it is done publish the changes.

Now you need to move to the project settings and in the bottom of it you will find the firebaseConfig within script tags. Copy that to a notepad file.

Now it is time to create the angular project. Please follow the steps in the below link which shows how to install and setup Firebase in your angular project. When following the steps at one stage you will need the code snippet that we have already copied to a notepad file.. So use it at the correct step.

https://github.com/angular/angularfire2/blob/master/docs/install-and-setup.md

Now we could proceed with the further implementations. Let us create a basic html page to upload and view files. So it is time to move to the app.component.html file.

We need to create a service to get records from the realtime database and also to add records to it. This could even be done in our app.component.ts file.. But that is not the best practice as then we need to write the same code lines over and over again. It is always better to create a service and import it to the component.ts files when required.

We have reached the last step, that is to implement the app.component.ts file.. In here we will be importing the service that we created above and we will be implementing methods to get data from the html page and to provide the requested functionalities with the help of the imported service.

It is important to make sure that all the imports which are mentioned at the beginning of the component.ts files are present in the project node modules folder. If not they must be installed as below.

npm install imported_file_name

That is it.. The end of the implementation process.. Let us try to work with this simple project now.. Upload an image and check in the Firebase Realtime database whether a record have been inserted and check the Firebase storage whether the file is added.. Next is to enter the ID and try to view the image..

Hope it works for you.. This is just a simple project to show how these things work.. But with the help of this you could add Firebase storage in you future projects and implement it further according to your project requirements.

You can view and download the project source code from GitHub..

Cheers!! Have pleasant day!!

Leave a Reply

Your email address will not be published. Required fields are marked *