Ng2-cloudinary NPM

ng2-cloudinary

Demo

https://ekito.github.io/ng2-cloudinary/demo/

About

Angular2 components for Cloudinary image back-end

Installation

Install through npm:

npm install --save ng2-cloudinary

## Usage

You may also find it useful to view the demo source.

Module imports

//demo.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { Ng2CloudinaryModule } from './../ng2-cloudinary';
import { FileUploadModule } from 'ng2-file-upload';
import { Demo } from './demo.component';

@NgModule({
    declarations: [Demo],
    imports: [
        BrowserModule,
        Ng2CloudinaryModule,
        FileUploadModule
    ],
    bootstrap: [Demo]
})
export class DemoModule {}

cl-image or CloudinaryImageComponent

This directive allows displaying Cloudinary image and apply transformations

//demo.component.ts
import {Component} from '@angular/core';
import {CloudinaryImageComponent} from 'ng2-cloudinary';

@Component({
  selector: 'demo-app',
  template: '<cl-image public-id="image_id" cloud-name="myCloudName"></cl-image>'
})
export class Demo {
}

CloudinaryUploader

This service allows uploading files to cloudinary using ng2-file-upload dependency.

//demo.component.ts
import { Component } from '@angular/core';
import { CloudinaryOptions, CloudinaryUploader } from 'ng2-cloudinary';

@Component({
  selector: 'demo-app',
  template: '<input type="file" ng2FileSelect [uploader]="uploader"/>',
})
export class Demo {

  cloudinaryImage: any;

  uploader: CloudinaryUploader = new CloudinaryUploader(
    new CloudinaryOptions({ cloudName: 'myCloudName', uploadPreset: 'myUnsignedPreset' })
  );

  constructor(){
    //Override onSuccessItem function to record cloudinary response data
    this.uploader.onSuccessItem = (item: any, response: string, status: number, headers: any) => {
      //response is the cloudinary response
      //see http://cloudinary.com/documentation/upload_images#upload_response
      this.cloudinaryImage = JSON.parse(response);
      
      return {item, response, status, headers};
    };
  }