Ionic 4 + Firestore + Storage | Image Upload with Progress Tutorial by Application

As we all know Firebase provides an awesome package of cloud services making the life of developers very easy. There is a wide range of tools available for next-level app development like Authentication, Testing, Analytics, Storage, Database, etc.

In this post, we will create an Ionic Application with Image Upload feature with Progress bar. It will also list already saved of Images. This application will focus on the two most important services of Firebase

Database: Cloud Firestore by Firebase is a NoSQL database which is very fast and reliable. In Firestore data is saved in the form of Collection of Documents which can be a hierarchy of Collection Document up to any level. In database will store Image Path, Name, and Size of uploaded image.

Storage: Storage service can save files of any type under a provided Bucket name. In storage, we will save actual Image uploaded by the user from the application.

Let’s start building!

Create Ionic 4 App

First, create a new Ionic 4 application with a blank template using the latest Ionic CLI v5.2.3. Make sure to update Ionic CLI by running following command.

Install AngularFire2 in Application

AngularFire2 is the official Angular library for Firebase. Using if we can easily connect with Firebase services with the Ionic application.

Run following NPM command to install AngularFire2

Now open the app.module.ts file to import the required Firebase services.

If you check above we have also import environment file and initialize it with firebase project credentials.

You need to create a project in Firebase

To create a project click on “+ Add Project” after logging in your Google account. Then fill project information then click “Create Project“.

Database Setup

After successful project creation, click on “Database” on the left sidebar to “Create database”.

Select “Start in test mode” option as currently, we are not using Authentication, so this option will let us read/write. But make sure to change this in a production application.

NOTE: If you get credential without creating Database then you will get error “ERROR Error: No Storage Bucket defined in Firebase Options.

Project Credentials: To get credential, click on “Project Overview” then click on “Web” icon then fill some details then “Register app”

Next, you will see credentials

Copy the values then paste in “~environments/environment.ts” file in the application root.

Storage Setup

Now we need to change Rule in storage as well otherwise you will get the following error “Firebase Storage: User does not have permission to access ‘freakyStorage/1563691783666_ABC.png’.

Click on “Storage” on the left sidebar, hit “Get Started” >> “Next” >> “Done“. Now click on the “Rules” tab then change

to

Then click “Publish”.

Phewww… Now you are done with Firebase connection with Application for two services Database and Storage.

Implement Image Upload

Finally, let’s start the implementation of the Image upload feature in our Ionic application.

As our application is having a blank template so it already having Home component.

In Home component class, import Storage and Firestore packages

Define MyData interface for values we will pass in the database.

Following are some Observables we will use to subscribe Upload methods.

Connect to FireStore collection and subscribe to valueChanges() to get snapshot of an updated list of images from Database.

here “freakyImages” is the name of collection which will be created if not exist.

uploadFile() method will first validate file type then call this.storage.upload(path, file, { customMetadata });  to start uploading file.

percentageChanges() returns percentage status of file uploading.

Subscribe to snapshotChanges() to get file upload progress and finalize() having addImagetoDB() method which save the details to database.

The complete home.component.ts file will have the following code.

The home component template we have three sections first one shows Image upload control

 

The second shows the progress with percentage bar and total file size and number of data transferred.

The third section shows the uploaded image with the download file link.

Complete home.page.html will have following HTML content.

In HTML there is “fileSizePipe” used to convert bytes of file size into a readable format. Add this pipe file file-size-format.pipe.ts in home component folder

Thanks to this Plunker

Also, import this Pipe in home.module.ts file

That’s it… now try running the app in the browser

 

Conclusion: In Ionic Application above we created a fully functional demo with Image Uploader control showing progress and snapshot of database images. Firebase provides many tools which can be easily incorporated in Ionic application to create high-end features filled with Google awesomeness.

 

 

 

Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

Leave a Reply

avatar
  Subscribe  
Notify of