Using Cloudinary with Angular 6 and Firebase Firestore

Hey there,

Sorry for the delay, it’s been a very long time since I posted but that’s gonna change.

Today we are continuing from where we stopped in the part 1 tutorial.

This time we are going to have a simple and straight forward tutorial, below is the tutorial carried out in [StackBlitz.

firstly we are going to install firebase

npm install firebase angularfire2 --save

After a successful installation of the firebase library we import in a couple of Angularfire modules into our App Module file app.module.ts

import { AngularFireDatabaseModule, AngularFireList } from 'angularfire2/database';
import { AngularFireModule } from 'angularfire2';

Now our app.module.ts

Before we go into our App Module file we need to set environment variables which the system will interact with and the variables we are setting are the information essential to firebase and cloudinary

In our environment files which are located in src/environment/

environment.ts file is responsible for setting environment variable during development while environment-prod.tsis for production mode.

In our environment.ts file we have something like this.

export const environment = {
production: false,
firebase: {
apiKey: "YOUR API KEY",
authDomain: "YOUR AUTH DOMAIN",
databaseURL: "YOUR DATABASE URL",
projectId: "YOUR PROJECT ID",
storageBucket: "YOUR STORAGE BUCKET",
messagingSenderId: "YOUR MESSAGING SENDER ID"
}
};

The config can be gotten from the firebase console.

After installingthe node library and configuring our emvironment variable with firebase information, we will need to import AngularFire2 and Firebase into our AppModule. So our AppModule file will look like this:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { AngularFireDatabaseModule, AngularFireList } from 'angularfire2/database';
import { AngularFireModule } from 'angularfire2';
import { environment } from '../environments/environment';
import { Ng2CloudinaryModule } from 'ng2-cloudinary';
import { FileUploadModule } from 'ng2-file-upload';
@NgModule({
imports:      [ BrowserModule,
FormsModule,
AngularFireDatabaseModule,
AngularFireModule.initializeApp(environment.firebase),
Ng2CloudinaryModule, FileUploadModule ],
declarations: [ AppComponent ],
bootstrap:    [ AppComponent ]
})
export class AppModule { }

After importing the AngularFireModule, AngularFireDatabaseModule we initialize our AngularFireModule with the information from our environment file as we have done above

AngularFireModule.initializeApp(environment.firebase)
That’s all for the AppModule file now let’s take a look at out App Component file or any custom component you want to use Firebase in.

After uploading our image to Cloudinary we need to store some data in our Firebase firestore database so we use

this.af.list('/cloudinaryupload').push(this.res)

to our data to the firebase firestore db.

Before we can retreive data from the db we need to have a reference of the database. And to do this all we need to do is

const ref = this.af.database.ref('/cloudinaryupload');

That creates a reference to the collection which we are trying to retreive from, after which we get data from the collection using

ref.on('value', (snapshot) => {})

with snapshot, which is the response from the callback. To use the snapshot as an array of objects for the iteration you need in the view I created a function snapshotToArraywhich returns the array of objects representation of the snapshot.

Full Code of App.component.ts

import { Component } from '@angular/core';
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
import { CloudinaryOptions, CloudinaryUploader } from 'ng2-cloudinary';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
name = 'Angular 6';
data: any[] = [];
cloudName = 'YOUR CLOUD NAME';
image_id;
res;
uploader: CloudinaryUploader = new CloudinaryUploader(
new CloudinaryOptions({
cloudName: this.cloudName,
uploadPreset: 'YOUR UPLOAD PRESET'
})
);
loading: any;
constructor(private af: AngularFireDatabase) {
this.getImages();
}
upload() {
this.loading = true;
this.uploader.uploadAll(); // call for uploading the data to Cloudinary
/* Getting the success response from Cloudinary. */
this.uploader.onSuccessItem = (item: any, response: string, status: number, headers: any): any => {
this.res = JSON.parse(response);
this.loading = false;
this.image_id = this.res.public_id;
console.log(this.res);
this.af.list('/cloudinaryupload').push(this.res) // Storing the complete response from Cloudinary
}
/* Getting the Error message Cloudinary throws. */
this.uploader.onErrorItem = function (fileItem, response, status, headers) {
console.info('onErrorItem', fileItem, response, status, headers)
};
}
/* Listing all the images and their information from the cloudinaryupload collection in firebase */
getImages() {
const ref = this.af.database.ref('/cloudinaryupload');
/* Fat arrow functions which exist in ES6 it is the same as function(snapshot) {} */
ref.on('value', (snapshot) => {
this.data = this.snapshotToArray(snapshot);
});
}
/*
* Responsible for converting Firebase snapshot to an array.
*/
snapshotToArray(snapshot) {
var returnArr = [];
snapshot.forEach(function (childSnapshot) {
var item = childSnapshot.val();
item.key = childSnapshot.key;
returnArr.push(item);
});
return returnArr;
};
}

Below is a demo and codebase of the tutorial above

Stackblitz for code demo sample

Demo and Code