ng2-cloudinary
TypeScript icon, indicating that this package has built-in type declarations

0.9.2 • Public • Published

ng2-cloudinary

Build Status npm version devDependency Status GitHub issues GitHub stars GitHub license

Demo

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

Table of contents

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};
    };
  }

Documentation

All documentation is auto-generated from the source via typedoc and can be viewed here: https://ekito.github.io/ng2-cloudinary/docs/

Development

Prepare your environment

  • Install Node.js and NPM (should come with)
  • Install local dev dependencies: npm install while current directory is this repo

Development server

Run npm start to start a development server on port 8000 with auto reload + tests.

Testing

Run npm test to run tests once or npm run test:watch to continually run tests.

Release

  • Bump the version in package.json (once the module hits 1.0 this will become automatic)
npm run release

License

MIT

Readme

Keywords

Package Sidebar

Install

npm i ng2-cloudinary

Weekly Downloads

35

Version

0.9.2

License

MIT

Last publish

Collaborators

  • jboulay