├── .gitignore ├── README.md ├── app ├── app.component.css ├── app.component.html ├── app.component.ts ├── app.module.ts ├── app.routing.ts ├── config.ts ├── main.ts ├── model │ ├── photo-album.service.ts │ └── photo.ts ├── photo-list │ ├── photo-list.component.css │ ├── photo-list.component.html │ └── photo-list.component.ts └── photo-upload │ ├── photo-upload.component.html │ └── photo-upload.component.ts ├── index.html ├── package.json ├── systemjs.config.js └── tsconfig.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist/ 4 | typings -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Cloudinary Angular 2 Photo Album Project 2 | ======================================= 3 | 4 | > Learn how to upload images in an Angular 2 app to Cloudinary and perform all sorts of transformation. 5 | 6 | This sample project shows: 7 | 8 | 1. How to use the Cloudinary Angular directives. 9 | 2. How to upload files to Cloudinary in an unsigned manner, using an upload preset. The upload control is based on the open source file uploader [ng2-file-upload](https://github.com/valor-software/ng2-file-upload) 10 | 3. How to use the dynamic list resource in order to maintain a short list of resources aggregated by tags. 11 | 12 | ## Configuration ## 13 | 14 | There are 2 settings you need to change for this demo to work. Open up `app/config.ts` and edit the following: 15 | 16 | 1. **cloud_name** - Should be change to the cloud name you received when you registered for a Cloudinary account. 17 | 2. **upload_preset** - You should first "Enable unsigned uploads" in the ["Upload Settings"](https://cloudinary.com/console/settings/upload) of your Cloudinary console and assign the resulting preset name to that field. Note, you may want to tweak and modify the upload preset's parameters. 18 | 3. Additionally, in your Cloudinary console in the ["Security Settings"](https://cloudinary.com/console/settings/security) section you should uncheck the "list" item. 19 | 20 | ## Setup ## 21 | 22 | Run `npm install` to install the required dependencies for this module. 23 | 24 | ## Running ## 25 | 26 | Run `npm start` to start the server and automatically open a browser and navigate to the application's url. 27 | 28 | The application is deplyoed at http://localhost:3000/ 29 | 30 | ## Internals ## 31 | This project is using [SystemJS](https://github.com/systemjs/systemjs) for bundling and serving the application. 32 | 33 | The project creates a new NgModule, and depends on CloudinaryModule which is imported from the SDK module. 34 | 35 | ### Sample main components ### 36 | 37 | #### Routing #### 38 | 39 | The application routes are defined in [app/app.routing.ts](app/js/app.routing.ts) 40 | 41 | The application has 2 routes: 42 | 43 | * **/photos** - Presents a list of images tagged by `myphotoalbum` 44 | * **/photos/new** - Presents an upload control that allows uploading multiple files by a file input or drag-and-grop. 45 | Uploads have a dynamic progress bar. In addition it displays the details of successful uploads. 46 | 47 | The default route is set to `/photos`. 48 | 49 | #### Services #### 50 | [photo-album.service.ts](app/js/model/photo-album.service.ts) retrieves the list of images from Cloudinary based on the `myphotoalbum` tag name. 51 | 52 | #### Components #### 53 | > Photo list 54 | * [photo-list.component.ts](app/js/photo-list/photo-list.component.ts) sets up the list of images displayed via one-way binding by [photo-list.component.html](app/js/photo-list/photo-list.component.html) 55 | * [photo-list.component.html](app/js/photo-list/photo-list.component.html) displays the bound images and displays basic transformations for each image 56 | 57 | > Photo Upload 58 | * [photo-upload.component.ts](app/photo-upload/photo-upload.component.ts) initializes the upload widget and sets up listeners on the progress events. 59 | * [photo-upload.component.html](app/photo-upload/photo-upload.component.html) displays the upload control and lists the properties of the uploaded images once upload completes successfully. 60 | 61 | **Important observations**: 62 | * This implementation is based on an Angular file uploader. 63 | * Changes to the title field are propagated to the `formData` being sent in the upload request. This is meant to illustrate the possibility of attaching extra meta-data to each upload image. 64 | * The upload control uses the `upload_preset` we configured in Configuration step. This uses the settings defined on Cloudinary side to process the uploaded file. 65 | 66 | ### Unsigned Upload ### 67 | 68 | In order to add images to our photo album that would later be retrievable from the Cloudinary service we must select a tag which will serve as our source for the list. In this case `myphotoalbum`. 69 | While this tag can be set in the upload preset and remain hidden from the client side, in this sample we included it in the request itself to make this sample work without further configuration steps. 70 | 71 | ### List Resource ### 72 | 73 | Cloudinary supports a JSON list resource. 74 | This list represents all resources marked with a specific tag during upload (or later through other APIs). 75 | Whenever a new resource is uploaded with a tag, or an existing resource already tagged is deleted then the list is recalculated. 76 | This enables you to group a list of resources which can be retrieved by a single query. The size of the list is currently limited to 100 entires. 77 | [Learn more](http://cloudinary.com/documentation/image_transformations#client_side_resource_lists) -------------------------------------------------------------------------------- /app/app.component.css: -------------------------------------------------------------------------------- 1 | .users-list li { 2 | cursor: pointer; 3 | } 4 | 5 | .jumbotron .glyphicon { 6 | font-size: 2px; 7 | } -------------------------------------------------------------------------------- /app/app.component.html: -------------------------------------------------------------------------------- 1 |
2 | 7 |
8 | 9 | 10 | 11 |
12 | 13 |
14 |
15 | 16 |
17 |
18 | 19 | 20 |
21 | 22 | -------------------------------------------------------------------------------- /app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'my-app', 5 | templateUrl: './app/app.component.html', 6 | styleUrls: ['./app/app.component.css'] 7 | }) 8 | 9 | export class AppComponent { 10 | 11 | } -------------------------------------------------------------------------------- /app/app.module.ts: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | // Angular modules 3 | import {NgModule} from '@angular/core'; 4 | import {BrowserModule} from '@angular/platform-browser'; 5 | import {HttpModule} from '@angular/http'; 6 | 7 | // File upload module 8 | import {FileUploadModule} from 'ng2-file-upload'; 9 | 10 | // Cloudinary module 11 | import {CloudinaryModule, CloudinaryConfiguration, provideCloudinary} from '@cloudinary/angular'; 12 | 13 | // Application modules 14 | import {AppComponent} from './app.component'; 15 | import {PhotoListComponent} from './photo-list/photo-list.component'; 16 | import {PhotoUploadComponent} from './photo-upload/photo-upload.component'; 17 | import {PhotoAlbum} from './model/photo-album.service'; 18 | import cloudinaryConfiguration from './config'; 19 | import {routing} from './app.routing'; 20 | 21 | @NgModule({ 22 | imports: [ 23 | BrowserModule, 24 | HttpModule, 25 | CloudinaryModule, 26 | FileUploadModule, 27 | routing 28 | ], 29 | declarations: [ 30 | AppComponent, 31 | PhotoListComponent, 32 | PhotoUploadComponent 33 | ], 34 | providers: [ 35 | PhotoAlbum, 36 | provideCloudinary(require('cloudinary-core'), cloudinaryConfiguration as CloudinaryConfiguration) 37 | ], 38 | bootstrap: [AppComponent] 39 | }) 40 | 41 | export class AppModule { } -------------------------------------------------------------------------------- /app/app.routing.ts: -------------------------------------------------------------------------------- 1 | import {ModuleWithProviders} from '@angular/core'; 2 | import {Routes, RouterModule} from '@angular/router'; 3 | import {PhotoListComponent} from './photo-list/photo-list.component'; 4 | import {PhotoUploadComponent} from './photo-upload/photo-upload.component'; 5 | 6 | const appRoutes: Routes = [ 7 | { 8 | path: 'photos', 9 | component: PhotoListComponent 10 | }, 11 | { 12 | path: 'photos/new', 13 | component: PhotoUploadComponent 14 | }, 15 | { 16 | path: '', 17 | redirectTo: '/photos', 18 | pathMatch: 'full' 19 | } 20 | ]; 21 | 22 | export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes); -------------------------------------------------------------------------------- /app/config.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | cloud_name: 'unicodeveloper', 3 | upload_preset: 'b9ej8dr5' 4 | }; -------------------------------------------------------------------------------- /app/main.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | import { AppModule } from './app.module'; 3 | 4 | platformBrowserDynamic().bootstrapModule(AppModule); -------------------------------------------------------------------------------- /app/model/photo-album.service.ts: -------------------------------------------------------------------------------- 1 | import {Injectable} from '@angular/core'; 2 | import {Http, Response} from '@angular/http'; 3 | import {Observable} from 'rxjs/Observable'; 4 | import 'rxjs/add/operator/map'; 5 | import {Photo} from './photo'; 6 | import {Cloudinary} from '@cloudinary/angular'; 7 | 8 | @Injectable() 9 | export class PhotoAlbum { 10 | 11 | constructor(private http: Http, private cloudinary: Cloudinary) { 12 | } 13 | 14 | getPhotos(): Observable { 15 | // instead of maintaining the list of images, we rely on the 'myphotoalbum' tag 16 | // and simply retrieve a list of all images with that tag. 17 | let url = this.cloudinary.url('myphotoalbum', { 18 | format: 'json', 19 | type: 'list', 20 | // cache bust (lists are cached by the CDN for 1 minute) 21 | // ************************************************************************* 22 | // Note that this is practice is DISCOURAGED in production code and is here 23 | // for demonstration purposes only 24 | // ************************************************************************* 25 | version: Math.ceil(new Date().getTime() / 1000) 26 | }); 27 | 28 | return this.http 29 | .get(url) 30 | .map((r: Response) => r.json().resources as Photo[]); 31 | } 32 | } -------------------------------------------------------------------------------- /app/model/photo.ts: -------------------------------------------------------------------------------- 1 | export class Photo { 2 | public_id: string; 3 | context: any; 4 | } -------------------------------------------------------------------------------- /app/photo-list/photo-list.component.css: -------------------------------------------------------------------------------- 1 | .photo { margin: 10px; padding: 10px; border-top: 2px solid #ccc; } 2 | .photo .thumbnail { margin-top: 10px; display: block; max-width: 200px; border: none; } 3 | .toggle_info { margin-top: 10px; font-weight: bold; color: #e62401; display: block; } 4 | .thumbnail_holder { height: 182px; margin-bottom: 5px; margin-right: 10px; } 5 | .info td, .uploaded_info td { font-size: 12px } 6 | .note { margin: 20px 0} -------------------------------------------------------------------------------- /app/photo-list/photo-list.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 5 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 |

Check this video out. Embedded in the page with a Cloudinary video directive!!!

23 | 24 | 25 |
26 |

27 | 28 | 35 | 36 | 37 |

38 |
39 |
40 | 41 |

Your Photos

42 | 43 |
44 | Add photo with Angular File upload 45 |
46 | 47 |
48 |

No photos were added yet.

49 |

No photos were added yet.

50 |
51 | 52 |

{{photo.context.custom.photo}}

53 | 54 | 55 | 67 | 68 | 69 |
70 | 71 |
72 |
73 | 74 | 75 | 76 | 101 | 122 | 143 | 168 | 207 | 208 |
77 |
78 | 79 | 80 |
81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 |
cropfill
width150
height150
radius10
99 |
100 | 		102 |
103 | 104 | 105 |
106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 |
cropscale
width150
height150
120 |
121 | 		123 |
124 | 125 | 126 |
127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 |
cropfit
width150
height150
141 |
142 | 		144 |
145 | 146 | 147 |
148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 |
cropthumb
gravityface
width150
height150
166 |
167 | 		169 |
170 | 171 | 172 | 173 | 174 |
175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 |
cropfill
effectsepia
gravitynorth
width150
height150
then
angle20
205 |
206 |
209 |
210 |
211 | 212 |
213 | Take a look at our documentation of Image Transformations for a full list of 214 | supported transformations. 215 |
216 |
217 |
-------------------------------------------------------------------------------- /app/photo-list/photo-list.component.ts: -------------------------------------------------------------------------------- 1 | import {Component, OnInit} from '@angular/core'; 2 | import {Observable} from 'rxjs/Rx'; 3 | import {PhotoAlbum} from '../model/photo-album.service'; 4 | import {Photo} from '../model/photo'; 5 | 6 | @Component({ 7 | selector: 'photo-list', 8 | templateUrl: './app/photo-list/photo-list.component.html', 9 | styleUrls: ['./app/photo-list/photo-list.component.css'] 10 | }) 11 | 12 | export class PhotoListComponent implements OnInit { 13 | 14 | private photos: Observable; 15 | 16 | constructor( 17 | private photoAlbum: PhotoAlbum 18 | ) { } 19 | 20 | ngOnInit(): void { 21 | this.photos = this.photoAlbum.getPhotos(); 22 | } 23 | } -------------------------------------------------------------------------------- /app/photo-upload/photo-upload.component.html: -------------------------------------------------------------------------------- 1 |
2 |

New Photo

3 |

Direct upload from the browser with Angular File Upload

4 |

You can also drag and drop an image file into the dashed area.

5 |
6 |
7 | 8 |
9 | 11 |
12 |
13 |
14 | 15 |
16 |
17 | 18 | 19 | 21 |
22 | 23 |
24 |
25 |
26 |

Status

27 |
28 |

{{response.file.name}}

29 |
30 | Uploading... {{response.progress}}% 31 |
In progress
32 |
Upload completed with status code {{response.status}}
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 | 41 |
42 |
43 |
44 |
45 | 46 | 47 | 48 | 49 | 50 |
{{ property.key }} {{ property.value | json}}
51 |
52 |
53 | 54 |
55 | 56 | Back to list -------------------------------------------------------------------------------- /app/photo-upload/photo-upload.component.ts: -------------------------------------------------------------------------------- 1 | import {Component, OnInit, Input, NgZone} from '@angular/core'; 2 | import {FileUploader, FileUploaderOptions, ParsedResponseHeaders} from 'ng2-file-upload'; 3 | import {Cloudinary} from '@cloudinary/angular'; 4 | 5 | @Component({ 6 | selector: 'photo-upload', 7 | templateUrl: './app/photo-upload/photo-upload.component.html' 8 | }) 9 | export class PhotoUploadComponent implements OnInit { 10 | 11 | @Input() 12 | responses: Array; 13 | 14 | private hasBaseDropZoneOver: boolean = false; 15 | private uploader: FileUploader; 16 | private title: string; 17 | 18 | constructor( 19 | private cloudinary: Cloudinary, 20 | private zone: NgZone 21 | ) { 22 | this.responses = []; 23 | this.title = ''; 24 | } 25 | 26 | ngOnInit(): void { 27 | const uploaderOptions: FileUploaderOptions = { 28 | url: `https://api.cloudinary.com/v1_1/${this.cloudinary.config().cloud_name}/upload`, 29 | autoUpload: true, 30 | isHTML5: true, 31 | removeAfterUpload: true, 32 | headers: [ 33 | { 34 | name: 'X-Requested-With', 35 | value: 'XMLHttpRequest' 36 | } 37 | ] 38 | }; 39 | this.uploader = new FileUploader(uploaderOptions); 40 | 41 | // Add custom tag for displaying the uploaded photo in the list 42 | this.uploader.onBuildItemForm = (fileItem: any, form: FormData): any => { 43 | form.append('upload_preset', this.cloudinary.config().upload_preset); 44 | let tags = 'myphotoalbum'; 45 | if (this.title) { 46 | form.append('context', `photo=${this.title}`); 47 | tags = `myphotoalbum,${this.title}`; 48 | } 49 | form.append('tags', tags); 50 | form.append('file', fileItem); 51 | 52 | fileItem.withCredentials = false; 53 | return { fileItem, form }; 54 | }; 55 | 56 | // Insert or update an entry in the responses array 57 | const upsertResponse = fileItem => { 58 | 59 | // Run the update in a custom zone since for some reason change detection isn't performed 60 | // as part of the XHR request to upload the files. 61 | // Running in a custom zone forces change detection 62 | this.zone.run(() => { 63 | // Update an existing entry if it's upload hasn't completed yet 64 | 65 | // Find the id of an existing item 66 | const existingId = this.responses.reduce((prev, current, index) => { 67 | if (current.file.name === fileItem.file.name && !current.status) { 68 | return index; 69 | } 70 | return prev; 71 | }, -1); 72 | if (existingId > -1) { 73 | // Update existing item with new data 74 | this.responses[existingId] = Object.assign(this.responses[existingId], fileItem); 75 | } else { 76 | // Create new response 77 | this.responses.push(fileItem); 78 | } 79 | }); 80 | }; 81 | 82 | this.uploader.onCompleteItem = (item: any, response: string, status: number, headers: ParsedResponseHeaders) => 83 | upsertResponse( 84 | { 85 | file: item.file, 86 | status, 87 | data: JSON.parse(response) 88 | } 89 | ); 90 | 91 | this.uploader.onProgressItem = (fileItem: any, progress: any) => 92 | upsertResponse( 93 | { 94 | file: fileItem.file, 95 | progress 96 | } 97 | ); 98 | } 99 | 100 | updateTitle(value: string) { 101 | this.title = value; 102 | } 103 | 104 | public fileOverBase(e: any): void { 105 | this.hasBaseDropZoneOver = e; 106 | } 107 | 108 | getFileProperties(fileProperties: any) { 109 | // Transforms Javascript Object to an iterable to be used by *ngFor 110 | if (!fileProperties) { 111 | return null; 112 | } 113 | return Object.keys(fileProperties) 114 | .map((key) => ({ 'key': key, 'value': fileProperties[key] })); 115 | } 116 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Angular 2 app 7 | 8 | 9 | 10 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "newapp", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\"", 8 | "test": "echo \"Error: no test specified\" && exit 1", 9 | "lite": "lite-server", 10 | "tsc": "tsc", 11 | "tsc:w": "tsc -w" 12 | }, 13 | "author": "", 14 | "license": "ISC", 15 | "devDependencies": { 16 | "@types/core-js": "^0.9.35", 17 | "@types/jasmine": "^2.5.41", 18 | "@types/node": "^7.0.4", 19 | "concurrently": "^3.1.0", 20 | "lite-server": "^2.2.2", 21 | "typescript": "^2.1.5" 22 | }, 23 | "dependencies": { 24 | "@angular/common": "^2.4.4", 25 | "@angular/compiler": "^2.4.4", 26 | "@angular/core": "^2.4.4", 27 | "@angular/forms": "^2.4.4", 28 | "@angular/http": "^2.4.4", 29 | "@angular/platform-browser": "^2.4.4", 30 | "@angular/platform-browser-dynamic": "^2.4.4", 31 | "@angular/router": "^3.4.4", 32 | "@cloudinary/angular": "^2.1.1", 33 | "cloudinary-core": "^2.1.9", 34 | "core-js": "^2.4.1", 35 | "ng2-file-upload": "^1.2.0", 36 | "rxjs": "^5.0.3", 37 | "systemjs": "^0.19.43", 38 | "zone.js": "^0.7.6" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /systemjs.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * System configuration 3 | */ 4 | (function (global) { 5 | System.config({ 6 | paths: { 7 | // paths serve as alias 8 | 'npm:': 'node_modules/' 9 | }, 10 | // map tells the System loader where to look for things 11 | map: { 12 | // our app is within the app folder 13 | app: 'dist', 14 | 15 | // angular bundles 16 | '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 17 | '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 18 | '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 19 | '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', 20 | '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 21 | '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 22 | '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 23 | '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 24 | 25 | // other libraries 26 | 'rxjs': 'npm:rxjs', 27 | 'ng2-file-upload': 'npm:ng2-file-upload', 28 | 'cloudinary-core': 'npm:cloudinary-core', 29 | '@cloudinary/angular': 'npm:@cloudinary/angular', 30 | 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js' 31 | }, 32 | // packages tells the System loader how to load when no filename and/or no extension 33 | packages: { 34 | app: { main: './main.js', defaultExtension: 'js' }, 35 | rxjs: { defaultExtension: 'js' }, 36 | 'ng2-file-upload': { main: 'ng2-file-upload.js', defaultExtension: 'js' }, 37 | 'cloudinary-core': { main: 'cloudinary-core-shrinkwrap.js', defaultExtension: 'js' }, 38 | '@cloudinary/angular': { main: 'index.js', defaultExtension: 'js' } 39 | } 40 | }); 41 | })(this); -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "commonjs", 5 | "moduleResolution": "node", 6 | "sourceMap": true, 7 | "emitDecoratorMetadata": true, 8 | "experimentalDecorators": true, 9 | "removeComments": false, 10 | "noImplicitAny": false, 11 | "outDir": "dist" 12 | } 13 | } --------------------------------------------------------------------------------