fixed: Event not getting triggered. #12

ribizli · Feb 1, 2017 · ee27acc · ee27acc
1 parent 2d0cb5f
commit ee27acc
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 35 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ng2-imageupload",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "A component which resizes the selected input file image",
   "main": "index.js",
   "scripts": {
@@ -24,10 +24,12 @@
   },
   "homepage": "https://github.com/ribizli/ng2-imageupload#readme",
   "devDependencies": {
-    "@angular/compiler": "^2.4.2",
-    "@angular/compiler-cli": "^2.4.2",
-    "@angular/core": "^2.4.1",
-    "@angular/platform-server": "^2.4.2",
+    "@angular/common": "^2.4.5",
+    "@angular/compiler": "^2.4.5",
+    "@angular/compiler-cli": "^2.4.5",
+    "@angular/core": "^2.4.5",
+    "@angular/platform-browser": "^2.4.5",
+    "@angular/platform-server": "^2.4.5",
     "rimraf": "^2.5.4",
     "rxjs": "^5.0.0",
     "typescript": "^2.0.9",

diff --git a/src/image-upload.directive.ts b/src/image-upload.directive.ts
@@ -1,8 +1,10 @@
-import {Directive, ElementRef,
-    OnInit, Input, Output, EventEmitter, Renderer, HostListener} from '@angular/core';
+import {
+    Directive, ElementRef,
+    OnInit, Input, Output, EventEmitter, Renderer, HostListener
+} from '@angular/core';
 
-import {ImageResult, ResizeOptions} from './interfaces';
-import {createImage, resizeImage} from './utils';    
+import { ImageResult, ResizeOptions } from './interfaces';
+import { createImage, resizeImage } from './utils';
 
 @Directive({
     selector: 'input[type=file][image-upload]'
@@ -25,36 +27,36 @@ export class ImageUploadDirective {
                 url: URL.createObjectURL(file)
             };
             let ext: string = file.name.split('.').pop();
-            if (this.allowedExtensions && this.allowedExtensions.length && this.allowedExtensions.indexOf(ext) === -1 ) {
+            if (this.allowedExtensions && this.allowedExtensions.length && this.allowedExtensions.indexOf(ext) === -1) {
                 result.error = 'Extension Not Allowed';
                 this.imageSelected.emit(result);
             } else {
-                this.fileToDataURL(file, result).then(r => this.resize(r)).then(r => this.imageSelected.emit(r));
+                this.fileToDataURL(file, result).then(r => this.resize(r))
+                    .then(r => this.imageSelected.emit(r))
+                    .catch(e => {
+                        result.error = 'Image processing error';
+                        this.imageSelected.emit(result);
+                    });
             }
         }
     }
 
     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);
-            }
+        if (!this.resizeOptions) return Promise.resolve(result);
+        return createImage(result.url).then(image => {
+            let dataUrl = resizeImage(image, this.resizeOptions);
+            result.resized = {
+                dataURL: dataUrl,
+                type: dataUrl.match(/:(.+\/.+;)/)[1]
+            };
+            return result;
         });
     }
 
     private fileToDataURL(file: File, result: ImageResult): Promise<ImageResult> {
         return new Promise((resolve) => {
             let reader = new FileReader();
-            reader.onload = function(e) {
+            reader.onload = function (e) {
                 result.dataURL = reader.result;
                 resolve(result);
             };

diff --git a/src/image-upload.module.ts b/src/image-upload.module.ts
@@ -1,5 +1,5 @@
-import {NgModule} from '@angular/core';
-import {ImageUploadDirective} from './image-upload.directive';
+import { NgModule } from '@angular/core';
+import { ImageUploadDirective } from './image-upload.directive';
 
 @NgModule({
     declarations: [ImageUploadDirective],

diff --git a/src/utils.ts b/src/utils.ts
@@ -1,11 +1,12 @@
-import {ResizeOptions} from './interfaces';
+import { ResizeOptions } from './interfaces';
 
-export function createImage(url: string, cb: (i: HTMLImageElement) => void) {
-    var image = new Image();
-    image.onload = function() {
-        cb(image);
-    };
-    image.src = url;
+export function createImage(url: string) {
+    return new Promise<HTMLImageElement>((res, rej) => {
+        const image = new Image();
+        image.onload = () => res(image);
+        image.onerror = rej;
+        image.src = url;
+    });
 }
 
 const resizeAreaId = 'imageupload-resize-area';
@@ -35,7 +36,7 @@ export function resizeImage(origImage: HTMLImageElement, {
     resizeQuality = 0.7,
     resizeType = 'image/jpeg'
 }: ResizeOptions = {}) {
-    
+
     let canvas = getResizeArea();
 
     let height = origImage.height;