fix #2: upgrade to rc5

README.md

@@ -23,39 +23,51 @@ Load it via SystemJs:
       });
 ```
 
-# Usage 
+# Usage
 
 ```typescript
-import {Component} from 'angular2/core';
-import {ImageUpload, ImageResult, ResizeOptions}
-  from 'ng-imageupload';
+import { NgModule }      from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { ImageUploadModule } from 'ng2-imageupload';
+
+import { AppComponent }  from './app.component';
+
+@NgModule({
+  imports: [ BrowserModule, ImageUploadModule ],
+  declarations: [ AppComponent ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }
+```
+
+```typescript
+import { Component } from '@angular/core';
+import { ImageResult, ResizeOptions } from 'ng2-imageupload';
 
 @Component({
     selector: 'my-app',
     template: `
-      <img [src]="src" [hidden]="!src">
+      <img [src]="src" [hidden]="!src"><br>
       <input type="file" image-upload
         (imageSelected)="selected($event)"
-        [resizeOptions]="resizeOptions">
-    `,
-    directives: [ImageUpload]
+        [resizeOptions]="resizeOptions">`
 })
-export class App {
+export class AppComponent {
     src: string = "";
     resizeOptions: ResizeOptions = {
-        resizeMaxHeight: 64,
-        resizeMaxWidth: 64
+        resizeMaxHeight: 128,
+        resizeMaxWidth: 128
     };
-    
+
     selected(imageResult: ImageResult) {
-        this.src = imageResult.resized 
-          && imageResult.resized.dataURL
-          || imageResult.dataURL;
+        this.src = imageResult.resized
+            && imageResult.resized.dataURL
+            || imageResult.dataURL;
     }
 }
 ```
 # API
-## selector: `[image-upload]`
+## selector: `input[type=file][image-upload]`
 
 ## event: `(imageSelected)`
 event fired (async) when the file input changes and the image's `dataURL` is calculated and the image is resized.

index.ts

@@ -1,2 +1,3 @@
 export * from './src/interfaces';
-export * from './src/image-upload';
+export * from './src/image-upload.directive';
+export * from './src/image-upload.module';

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ng2-imageupload",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "A component which resizes the selected input file image",
   "main": "index.js",
   "scripts": {
@@ -26,15 +26,15 @@
   },
   "homepage": "https://github.com/ribizli/ng2-imageupload#readme",
   "devDependencies": {
-    "@angular/core": "^2.0.0-rc.1",
-    "rimraf": "~2.5.2",
-    "rxjs": "^5.0.0-beta.6",
+    "@angular/core": "^2.0.0-rc.5",
+    "rimraf": "^2.5.4",
+    "rxjs": "5.0.0-beta.6",
     "typescript": "^1.8.10",
-    "typings": "^0.8.1",
-    "zone.js": "^0.6.6"
+    "typings": "^1.3.3",
+    "zone.js": "^0.6.17"
   },
   "dependencies": {},
   "peerDependencies": {
-    "@angular/core": "^2.0.0-rc.1"
+    "@angular/core": "^2.0.0-rc.5"
   }
 }

src/image-upload.ts → src/image-upload.directive.ts

@@ -1,62 +1,59 @@
-import {Directive, ElementRef,
-    OnInit, Input, Output, EventEmitter, Renderer} from '@angular/core';
-
-import {ImageResult, ResizeOptions} from './interfaces';
-import {createImage, resizeImage} from './utils';    
-
-@Directive({
-    selector: 'input[type=file][image-upload]'
-})
-export class ImageUpload implements OnInit {
-
-    @Output() imageSelected = new EventEmitter<ImageResult>();
-
-    @Input() resizeOptions: ResizeOptions;
-
-    constructor(private _elementref: ElementRef, private _renderer: Renderer) {
-    }
-
-    ngOnInit() {
-        this._renderer.listen(this._elementref.nativeElement, 'change', e => this.readFiles(e));
-    }
-
-    private readFiles(event) {
-        for (let file of event.target.files) {
-            let result: ImageResult = {
-                file: file,
-                url: URL.createObjectURL(file)
-            };
-            this.fileToDataURL(file, result).then(r => this.resize(r)).then(r => this.imageSelected.emit(r));
-        }
-    }
-
-    private resize(result: ImageResult): Promise<ImageResult> {
-        return new Promise((resolve) => {
-            if (this.resizeOptions) {
-                createImage(result.url, image => {
-                    let dataUrl = resizeImage(image, this.resizeOptions);
-                    result.resized = {
-                        dataURL: dataUrl,
-                        type: dataUrl.match(/:(.+\/.+;)/)[1]
-                    };
-                    resolve(result);
-                });
-            } else {
-                resolve(result);
-            }
-        });
-    }
-
-    private fileToDataURL(file: File, result: ImageResult): Promise<ImageResult> {
-        return new Promise((resolve) => {
-            let reader = new FileReader();
-            reader.onload = function(e) {
-                result.dataURL = reader.result;
-                resolve(result);
-            };
-            reader.readAsDataURL(file);
-        });
-    }
-}
-
-
+import {Directive, ElementRef,
+    OnInit, Input, Output, EventEmitter, Renderer, HostListener} from '@angular/core';
+
+import {ImageResult, ResizeOptions} from './interfaces';
+import {createImage, resizeImage} from './utils';    
+
+@Directive({
+    selector: 'input[type=file][image-upload]'
+})
+export class ImageUploadDirective {
+
+    @Output() imageSelected = new EventEmitter<ImageResult>();
+
+    @Input() resizeOptions: ResizeOptions;
+
+    constructor(private _elementref: ElementRef, private _renderer: Renderer) {
+    }
+
+    @HostListener('change', ['$event'])
+    private readFiles(event) {
+        for (let file of event.target.files) {
+            let result: ImageResult = {
+                file: file,
+                url: URL.createObjectURL(file)
+            };
+            this.fileToDataURL(file, result).then(r => this.resize(r)).then(r => this.imageSelected.emit(r));
+        }
+    }
+
+    private resize(result: ImageResult): Promise<ImageResult> {
+        return new Promise((resolve) => {
+            if (this.resizeOptions) {
+                createImage(result.url, image => {
+                    let dataUrl = resizeImage(image, this.resizeOptions);
+                    result.resized = {
+                        dataURL: dataUrl,
+                        type: dataUrl.match(/:(.+\/.+;)/)[1]
+                    };
+                    resolve(result);
+                });
+            } else {
+                resolve(result);
+            }
+        });
+    }
+
+    private fileToDataURL(file: File, result: ImageResult): Promise<ImageResult> {
+        return new Promise((resolve) => {
+            let reader = new FileReader();
+            reader.onload = function(e) {
+                result.dataURL = reader.result;
+                resolve(result);
+            };
+            reader.readAsDataURL(file);
+        });
+    }
+}
+
+

src/image-upload.module.ts

@@ -0,0 +1,8 @@
+import {NgModule} from '@angular/core';
+import {ImageUploadDirective} from './image-upload.directive';
+
+@NgModule({
+    declarations: [ImageUploadDirective],
+    exports: [ImageUploadDirective]
+})
+export class ImageUploadModule { }

src/utils.ts

@@ -16,6 +16,8 @@ function getResizeArea() {
         resizeArea = document.createElement('canvas');
         resizeArea.id = resizeAreaId;
         resizeArea.style.visibility = 'hidden';
+        resizeArea.style.position = 'absolute';
+        resizeArea.style.transform = 'translate(-1000px, 0)';
         document.body.appendChild(resizeArea);
     }
 

tsconfig.json

@@ -4,14 +4,10 @@
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "target": "es5",
-    "module": "system",
+    "module": "commonjs",
     "moduleResolution": "node",
     "removeComments": true,
     "sourceMap": true,
     "declaration": true
-  },
-  "files": [
-    "typings/main.d.ts",
-    "index.ts"
-  ]
+  }
 }

typings.json

@@ -1,5 +1,5 @@
 {
-  "ambientDependencies": {
-    "es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654"
+  "globalDependencies": {
+    "core-js": "registry:dt/core-js#0.0.0+20160725163759"
   }
 }