Using Cloudinary with Angular 4 and Firebase

Hey there,

I am back with another awesome but simple post on how to integrate Cloudinary with Angular 4 and FIrebase. In this post we will be doing the basic integration and getting the uploading of images working.

So let’s start with my usual introduction; by introducing Cloudinary to those of you that don’t have a clue of it is:

Cloudinary is a SaaS technology company headquartered in Sunnyvale, California, with an office in Israel. The company provides a cloud-based image and video management solution. It enables users to upload, store, manage, manipulate and deliver images and video for websites and apps. Cloudinary is used by more than 120,000 web and mobile application developers at more than 3,000 companies including Condé Nast, Dropbox, WeWork, Outbrain, Taboola and Answers.com. Inc. Magazine has called Cloudinary the “gold standard” of image management on the web. — Wikipedia

So now that I have given you a Wikipedia insight of what Cloudinary, let’s also get a lil wikipedia insight of what firebase is.

Firebase is a mobile and web application development platform developed by Firebase, Inc. in 2011, then acquired by Google in 2014. — Wikipedia

So back to our tutorial.

Firstly we have to install Angular CLI for our project

npm install @angular/cli@latest --save

after inserting the above code into our command line, we create a new project

ng new clupload
cd clupload
ng serve

Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

You can configure the default HTTP host and port used by the development server with two command-line options :

ng serve --host 0.0.0.0 --port 4201

After playing around with command line you can go back to your project and create a new component:

ng g c upload

Now that the upload folder and files has been created we will need to create a service file for some of our firebase logic.

ng g s fbase

So your empty component file should look like this:

import { Component, OnInit } from '@angular/core';
@Component({

  selector: 'app-upload',
  templateUrl: './upload.component.html',
  styleUrls: ['./upload.component.css']
})
export class UploadComponent implements OnInit {
  constructor() { }
  ngOnInit() {
  }
}

Your service file fbase should look like this:

import { Injectable } from '@angular/core';
@Injectable()
export class FbaseService {
  constructor() { }
}

Let’s start with the uploading, but firstly we will have to create a file input in a form in the component html file (upload.component.html).

<input type="file" ng2FileSelect [uploader]="uploader" accept="image/*;capture=camera">
<button [disabled]="loading" (click)="upload()" class="btn btn-success mt-3">Upload</button>

This will give us errors when we compile it because we haven’t told Angular that we are gonna be using some directives that aren’t default Angular or Typescript directives. So to eradicate this error we need to install the cloudinary library

npm install ng2-cloudinary

After installing the node library we will need to import it into our AppModule. So our AppModule file will look like this:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HttpModule} from '@angular/http';
import { Ng2CloudinaryModule } from 'ng2-cloudinary';
import { UploadComponent } from '.upload/upload.component';
@NgModule({
imports: [
CommonModule,
FormsModule,
HttpModule,
Ng2CloudinaryModule
],
declarations: [UploadComponent]
})
export class AppModule { }

After importing the Ng2CloudinaryModule into the AppModule file we will need to use it in our component, and to do this we will need to import it into our component.

import { CloudinaryOptions, CloudinaryUploader } from 'ng2-cloudinary';

Using the above syntax to import the necessary properties of the Cloudinary library.

After that we will need to put up our Cloudinary info into the Cloudinary Options function which is used in a function which is assigned to a variable which has CloudinaryUploader has its type:

uploader: CloudinaryUploader = new CloudinaryUploader(
new CloudinaryOptions({ cloudName: 'CLOUDINARY CLOUD NAME', uploadPreset: 'CLOUDINARY UPLOAD PRESET' })
);

You can get your Cloudinary Cloud Name from your Cloudinary Dashboard and also get your Upload Preset from your settings

Cloudinary Cloud Name

Cloudinary Upload Preset

Upload Component

import { Component, OnInit } from '@angular/core';
import { CloudinaryOptions, CloudinaryUploader } from 'ng2-cloudinary';
@Component({
   selector: 'app-upload',
   templateUrl: './upload.component.html',
   styleUrls: ['./upload.component.css']
})
export class UploadComponent implements OnInit {
    uploader: CloudinaryUploader = new CloudinaryUploader(
     new CloudinaryOptions({ cloudName: 'CLOUDINARY CLOUD NAME', uploadPreset: 'CLOUDINARY UPLOAD PRESET' })
    );
   
   loading: any;
   constructor() { }
   ngOnInit() {
   }
   upload(){
     this.loading = true;
     this.uploader.uploadAll();
     this.uploader.onSuccessItem = (item: any, response: string, status: number, headers: any): any => {
          let res: any = JSON.parse(response);
          console.log(res);
      }
      this.uploader.onErrorItem = function(fileItem, response, status, headers) {
         console.info('onErrorItem', fileItem, response, status, headers);
       };
   }
}

The above codebase consist of a function upload which contains few other functions like this.uploader.uploadAll()which uploads the image in the file input field.

this.uploader.onSuccessItemthis is a callback that gets the information about the cloudinary upload when the upload is successful. This returns information like the url, secure url and the name of the image after it has been uploaded.

this.uploader.onErrorItem this is a callback that get the Error message when there is something wrong with the upload. This can include the error message and the status.

FULL CODE

//Upload.component.ts
import { Component, OnInit } from '@angular/core';
import { CloudinaryOptions, CloudinaryUploader } from 'ng2-cloudinary';
@Component({
selector: 'app-upload',
templateUrl: './upload.component.html',
styleUrls: ['./upload.component.css']
})
export class UploadComponent implements OnInit {
uploader: CloudinaryUploader = new CloudinaryUploader(
new CloudinaryOptions({ cloudName: 'CLOUDINARY CLOUD NAME', uploadPreset: 'CLOUDINARY UPLOAD PRESET' })
);
   
   loading: any;
constructor() { }
ngOnInit() {
}
upload(){
this.loading = true;
this.uploader.uploadAll();
this.uploader.onSuccessItem = (item: any, response: string, status: number, headers: any): any => {
let res: any = JSON.parse(response);
console.log(res);
}
this.uploader.onErrorItem = function(fileItem, response, status, headers) {
console.info('onErrorItem', fileItem, response, status, headers);
};
}
}
//Upload.component.html
<input type="file" ng2FileSelect [uploader]="uploader" accept="image/*;capture=camera">
<button [disabled]="loading" (click)="upload()" class="btn btn-success mt-3">Upload</button>

To be continued...

Thank you.

Part 2 of this tutorial is available Here