feat(input): added the ability to pass a beforeUpload function that c…

…an modify each file/url or abort entirely (#101)

fixes #59

demo/src/app/basic/basic.component.html

@@ -1,4 +1,4 @@
-<h4 class="mb-3">Basic Usage</h4>
+<h4 class="mb-3 mt-3">Basic Usage</h4>
 
 <image-upload url="https://httpbin.org/status/200"></image-upload>
 

demo/src/app/customise/customise.component.html

@@ -1,4 +1,4 @@
-<h4 class="mb-3">Custom Labels</h4>
+<h4 class="mb-3 mt-5">Custom Labels</h4>
 
 <image-upload url="https://httpbin.org/status/200" buttonCaption="PRESS ME AAAAAAAAAH" dropBoxMessage="DROP ON ME AAAAAAAAAH" clearButtonCaption="CLEAR ME AAAAAAAAAH"></image-upload>
 

demo/src/app/events/events.component.html

@@ -1,15 +1,15 @@
-<h4 class="mb-3">Events</h4>
+<h4 class="mb-3 mt-5">Events</h4>
 
 <image-upload url="https://httpbin.org/status/200"
               (removed)="onRemoved($event)"
-              (uploadFinished)="onUploadFinished($event)"              
+              (uploadFinished)="onUploadFinished($event)"
               (uploadStateChanged)="onUploadStateChanged($event)">
 </image-upload>
 
 <pre><code class="language-markup"><![CDATA[<image-upload
   url="https://httpbin.org/status/200"
   (removed)="onRemoved($event)"
-  (uploadFinished)="onUploadFinished($event)"  
+  (uploadFinished)="onUploadFinished($event)"
   (uploadStateChanged)="onUploadStateChanged($event)">
 </image-upload>]]></code></pre>
 

demo/src/app/filter/filter.component.html

@@ -1,5 +1,25 @@
-<h4 class="mb-3">Limit and filter images</h4>
+<h4 class="mb-3 mt-5">Limit and filter images</h4>
 
 <image-upload url="https://httpbin.org/status/200" [max]="2" [extensions]="['jpeg','png']"></image-upload>
 
 <pre><code class="language-markup"><![CDATA[<image-upload url="https://httpbin.org/status/200" [max]="2" [extensions]="['jpeg','png']"></image-upload>]]></code></pre>
+
+<h5 class="mb-3 mt-3">Manual filtering and editing</h5>
+
+<image-upload url="https://httpbin.org/status/200" [beforeUpload]="onBeforeUpload"></image-upload>
+
+<pre><code class="language-markup"><![CDATA[<image-upload url="https://httpbin.org/status/200" [beforeUpload]="onBeforeUpload"></image-upload>]]></code></pre>
+
+<pre><code class="language-typescript"><![CDATA[private fileCounter = 0;
+
+onBeforeUpload = (metadata: UploadMetadata) => {
+  if (this.fileCounter % 2 === 0) {
+    metadata.abort = true;
+  } else {
+    // mutate the file or replace it entirely - metadata.file
+    metadata.url = 'http://somewhereelse.com'
+  }
+
+  this.fileCounter++;
+  return metadata;
+};]]></code></pre>

demo/src/app/filter/filter.component.ts

@@ -1,9 +1,22 @@
 import { Component } from '@angular/core';
+import { UploadMetadata } from '../../lib/image-upload/before-upload.interface';
 
 @Component({
   selector: 'filter',
   templateUrl: './filter.component.html'
 })
 export class FilterExampleComponent {
+  private fileCounter = 0;
 
+  onBeforeUpload = (metadata: UploadMetadata) => {
+    if (this.fileCounter % 2 === 0) {
+      metadata.abort = true;
+    } else {
+      // mutate the file or replace it entirely - metadata.file
+      metadata.url = 'http://somewhereelse.com';
+    }
+
+    this.fileCounter++;
+    return metadata;
+  };
 }

index.d.ts

@@ -1,2 +1,3 @@
 export { ImageUploadModule } from './lib/image-upload.module';
 export { ImageUploadComponent, FileHolder } from './lib/image-upload/image-upload.component';
+export { UploadMetadata } from './lib/image-upload/before-upload.interface';

src/image-upload/before-upload.interface.ts

@@ -0,0 +1,5 @@
+export interface UploadMetadata {
+  file: File;
+  url: string;
+  abort: boolean;
+}

src/image-upload/image-upload.component.ts

@@ -1,5 +1,6 @@
 import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
 import { Headers } from '@angular/http';
+import { UploadMetadata } from './before-upload.interface';
 
 import { ImageService } from './image.service';
 
@@ -23,6 +24,7 @@ export class ImageUploadComponent implements OnInit {
   fileOver: boolean = false;
   showFileTooLargeMessage: boolean = false;
 
+  @Input() beforeUpload: (UploadMetadata) => UploadMetadata | Promise<UploadMetadata> = data => data;
   @Input() buttonCaption: string = 'Select Images';
   @Input() clearButtonCaption: string = 'Clear';
   @Input() dropBoxMessage: string = 'Drop your images here!';
@@ -96,30 +98,40 @@ export class ImageUploadComponent implements OnInit {
     }
   }
 
-  private uploadFiles(files: FileList, filesToUploadNum: number) {
+  private async uploadFiles(files: FileList, filesToUploadNum: number) {
     for (let i = 0; i < filesToUploadNum; i++) {
-      let file = files[i];
+      const file = files[i];
 
       if (this.maxFileSize && file.size > this.maxFileSize) {
+        this.fileCounter--;
+        this.inputElement.nativeElement.value = '';
         this.showFileTooLargeMessage = true;
         continue;
       }
 
-      let img = document.createElement('img');
-      img.src = window.URL.createObjectURL(file);
+      const beforeUploadResult: UploadMetadata = await this.beforeUpload({ file, url: this.url, abort: false });
 
-      let reader = new FileReader();
+      if (beforeUploadResult.abort) {
+        this.fileCounter--;
+        this.inputElement.nativeElement.value = '';
+        continue;
+      }
+
+      const img = document.createElement('img');
+      img.src = window.URL.createObjectURL(beforeUploadResult.file);
+
+      const reader = new FileReader();
       reader.addEventListener('load', (event: any) => {
-        let fileHolder: FileHolder = new FileHolder(event.target.result, file);
-        this.uploadSingleFile(fileHolder);
+        const fileHolder: FileHolder = new FileHolder(event.target.result, beforeUploadResult.file);
+        this.uploadSingleFile(fileHolder, beforeUploadResult.url);
         this.files.push(fileHolder);
       }, false);
-      reader.readAsDataURL(file);
+      reader.readAsDataURL(beforeUploadResult.file);
     }
   }
 
-  private uploadSingleFile(fileHolder: FileHolder) {
-    if (this.url) {
+  private uploadSingleFile(fileHolder: FileHolder, url = this.url) {
+    if (url) {
       this.pendingFilesCounter++;
       fileHolder.pending = true;