Complete guide on Ionic firebase image upload from camera or gallery

In Ionic, we can easily upload an image file in Firebase as easily as CRUD operation on Firebase through Angular/Fire module.  In this tutorial, we’ll learn how Ionic firebase image upload from the camera or gallery of a mobile device. Firebase has made the life of developers easier as developers don’t have to spend much time building backend servers to build APIs.

We have two important goals behind this article. First how to upload images from our application to Firebase storage of a particular image folder. You can use an Ionic capacitor or Cordova, in our case we are using a Cordova camera to upload an image to firebase storage as the same code. Second, we need to convert our base64 image from camera to png file format.

Prerequisites:
To create and run an Ionic project, We need node js and Ionic CLI already install in our system, if not then check how to install node js and Ionic in Ubuntu. Ionic CLI allows us to create an Ionic project, generate application and library code, and perform a variety of ongoing development tasks such as testing, bundling, and deployment. To install the latest Ionic CLI, open a terminal, and run the following command:

npm install -g @ionic/cli

Setting up project for Ionic uploading image to Firebase storage

Let first create an ionic project to set up and configure the project for the Ionic Firebase upload image. As from Ionic version 4 and above, Ionic allows us to create Ionic projects from different Frameworks like Vue, React, and Angular. In our case, we are using the Ionic Angular framework and run the following command to create a project and add the Cordova camera plugin.

ionic start cameraFirebase blank --type=angular
ionic cordova plugin add cordova-plugin-camera
npm install @ionic-native/camera
npm install @ionic-native/core

npm install firebase --save
ng add @angular/fire

Ionic Cordova plugin camera supported many platforms and these includes Android, Browser, iOS, and Windows.

Note: Since IOS 10 the camera requires permissions to be placed in your config.xml add.

<config-file parent="NSCameraUsageDescription" platform="ios" target="*-Info.plist">
 <string>You can take photos</string>
</config-file>

Create and configure our project in the Firebase console

We have to create a project in Firebase to upload our image to Firebase storage. We need a copy of the web app API from the firebase project to link to our Ionic front-end application. If you already created and configure our Firebase environment, then you can skip the configuration. Otherwise, check our previous Ionic Firebase CRUD operation, we have complete details on how to create and configure the Firebase project.

Note: As in this example, we don’t set any authentication and this is just a tutorial on how to upload an image from the Ionic project to Firebase storage . For access the Firebase storage we have to change to storage rule so that any one can read/write on storage. This means allowing the public to access. Click on storage rule and change the value for public access as

Ionic firebase image upload

Add Firebase web API to our Ionic project

Once we have Firebase web API, then we need to copy our firebase project API key and past API key in our client project src/environments/environment.ts as shown in the code snippet below.

export const environment = {
  production: false,
  firebaseConfig: {
    apiKey: "A...............................s",
    authDomain: "quotesite-b.....firebaseapp.com",
    databaseURL: "https://quotesite-b1....firebaseio.com",
    projectId: "quotesite-b..e",
    storageBucket: "quotesite-b..e.appspot.com",
    messagingSenderId: "7827103245198",
    appId: "1:203541...81105:web:sddgebbb18esdv34c7e575bd0"
  }
};

In our ser/environments/environment.ts file, we have our firebase API configuration information and we need to add this data our angularFireModule in app.module.ts file and we also need to import cordova camera also. Let edit app.module.ts file.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { Camera } from '@ionic-native/camera/ngx';
import { AngularFireModule } from '@angular/fire';
import { environment } from '../environments/environment';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(), 
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
  ],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    Camera
  ],
  bootstrap: [AppComponent],
})
export class AppModule { }

Add code to upload image to Firebase storage

In our home.page.html template let add three button, one to upload image from camera and other to upload image from mobile device. Once we get image from camera, then we are displaying it on our screen and we have upload button to upload image to Firebase storage.

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Ionic firebase image upload
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-grid>
    <ion-row class="ion-align-self-center">
      <ion-col size="6">
        <ion-button (click)="takePhoto(1)">Show Camera</ion-button>
      </ion-col>
      <ion-col size="6">
        <ion-button (click)="takePhoto(0)">Show Album</ion-button>
      </ion-col>
    </ion-row>
  </ion-grid>
  <div *ngIf="base64Image">
    <img [src]="base64Image">
    <ion-button (click)="upload()">Upload to Firebase!</ion-button>
  </div>
</ion-content>

Logic to get image from camera or gallery of mobile device.

We are using Ionic cordova camera plugin to get image from camera and gallery and you can used Capacitor camera also. As logic for uploading image is same for both. We have use Angular/fire module to upload image, is also possible to upload image using firebase module also. Let edit home.page.ts file.

import { Component } from '@angular/core';
import { Camera, CameraOptions } from '@ionic-native/camera/ngx';
import { AngularFireStorage } from "@angular/fire/storage"
import { AlertController } from '@ionic/angular';
import { map, finalize } from "rxjs/operators";
import { Observable } from "rxjs";

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  base64Image: string;
  selectedFile: File = null;
  downloadURL: Observable<string>;

  constructor(private camera: Camera,
    private alertCtrl: AlertController,
    private storage: AngularFireStorage) { }

  async takePhoto(sourceType: number) {
    const options: CameraOptions = {
      quality: 100,
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
      sourceType
    };

    this.camera.getPicture(options).then((imageData) => {
      // imageData is either a base64 encoded string or a file URI
      this.base64Image = 'data:image/jpeg;base64,' + imageData;
    }, (err) => {
      // Handle error
      console.error(err);
    });
  }

  upload(): void {
    var currentDate = Date.now();
    const file: any = this.base64ToImage(this.base64Image);
    const filePath = `Images/${currentDate}`;
    const fileRef = this.storage.ref(filePath);

    const task = this.storage.upload(`Images/${currentDate}`, file);
    task.snapshotChanges()
      .pipe(finalize(() => {
        this.downloadURL = fileRef.getDownloadURL();
        this.downloadURL.subscribe(downloadURL => {
          if (downloadURL) {
            this.showSuccesfulUploadAlert();
          }
          console.log(downloadURL);
        });
      })
      )
      .subscribe(url => {
        if (url) {
          console.log(url);
        }
      });
  }

  async showSuccesfulUploadAlert() {
    const alert = await this.alertCtrl.create({
      cssClass: 'basic-alert',
      header: 'Uploaded',
      subHeader: 'Image uploaded successful to Firebase storage',
      message: 'Check Firebase storage.',
      buttons: ['OK']
    });

    await alert.present();
  }

  base64ToImage(dataURI) {
    const fileDate = dataURI.split(',');
    // const mime = fileDate[0].match(/:(.*?);/)[1];
    const byteString = atob(fileDate[1]);
    const arrayBuffer = new ArrayBuffer(byteString.length);
    const int8Array = new Uint8Array(arrayBuffer);
    for (let i = 0; i < byteString.length; i++) {
      int8Array[i] = byteString.charCodeAt(i);
    }
    const blob = new Blob([arrayBuffer], { type: 'image/png' });
    return blob;
  }

}

To upload a photo, we will first need to get a reference from the Firebase storage root and need file path. After that, we need to set the file path in Firebase Storage. In this app, we have defined that all pictures must be inside a path ./images/filename-.jpg.

Once we have image path reference we will need to do the actual uploading using the storage.upload method from AngularFireStorage class.
This method requires 2 parameters, which are the data of the actual picture, and the path of image upload.
Since our picture was captured by the camera and stored inside the base64Image which is base64 format, we need to convert it to actual image format. We have base64ToImage method will convert base64 to png file format then we png format image to upload to firebase.

Ionic firebase image upload example

Show prompt when upload succeeds
We are using the AlertControlle component from the @ionic/angular package and to display an alert box for successfully uploading a photo to firebase.  To achieve this we have to import AlertController and inject it into our constructor.

Conclusion
In this article, we have explored details on how to upload images from our Ionic apps to firebase storage using the angular/fire module. If you’re using an Ionic upload image from the camera then we need to convert base64 to image format like png. I hope that this article was able to get you up and running with the Ionic firebase image upload to Firebase storage.

Related posts

Leave a Comment

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

Scroll to Top