feat: retrieve files on open (#130)

fixes 12

Author: sabrio

demo/src/app/demo/components/demo.component.html

@@ -4,4 +4,5 @@
   <customise></customise>
   <events></events>
   <styles></styles>
+  <uploaded></uploaded>
 </div>

demo/src/app/demo/components/uploaded/uploaded.component.html

@@ -0,0 +1,9 @@
+<h4 class="mb-3 mt-3">Uploaded Usage</h4>
+
+<image-upload
+    url="https://httpbin.org/status/200"
+    [uploadedFiles]="images"
+    (removed)="onRemoved($event)"
+></image-upload>
+
+<pre><code class="language-markup"><![CDATA[<image-upload url="https://httpbin.org/status/200" [uploadedFiles]="images"></image-upload>]]></code></pre>

demo/src/app/demo/components/uploaded/uploaded.component.ts

@@ -0,0 +1,28 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'uploaded',
+  templateUrl: './uploaded.component.html'
+})
+export class UploadedExampleComponent {
+  myHeaders: { [name: string]: any } = {
+    'Authorization': 'MyToken',
+    'Another Header': 'AnotherValue'
+  };
+
+  images = [];
+
+  onRemoved(event){
+    console.log(event);
+  }
+
+  ngOnInit(){
+    setTimeout(()=>{
+      this.images = [
+        'https://static.independent.co.uk/s3fs-public/styles/story_medium/public/thumbnails/image/2016/10/11/14/beats-logo-1200-80.jpg',
+        'https://s-media-cache-ak0.pinimg.com/originals/68/fb/c7/68fbc7bc9eb8c530c6e804c4109ec647.jpg',
+        {fileName: 'google-image.jpg', url: 'https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png'}
+      ];
+    }, 1000);
+  }
+}

demo/src/app/demo/demo.module.ts

@@ -7,6 +7,7 @@ import { DemoComponent } from './components/demo.component';
 import { EventsComponent } from './components/events/events.component';
 import { FilterExampleComponent } from './components/filter/filter.component';
 import { StyleComponent } from './components/style/style.component';
+import {UploadedExampleComponent} from "./components/uploaded/uploaded.component";
 
 @NgModule({
   declarations: [
@@ -15,7 +16,8 @@ import { StyleComponent } from './components/style/style.component';
     FilterExampleComponent,
     CustomiseComponent,
     EventsComponent,
-    StyleComponent
+    StyleComponent,
+    UploadedExampleComponent
   ],
   imports: [
     ImageUploadModule

demo/src/assets/readme.md

@@ -43,6 +43,8 @@ Content-Type. The query has a single field called `image`.
 
 `[extensions]="['jpg','png','gif']"` - upload images with specific extensions. Default all extensions `image/*` is allowed.
 
+`[uploadedFiles]="['http://example.com/path/to/my/file', {'fileName': 'fileName.jpg', url: 'http://example.com/path/to/my/file'}]"` - enters the uploaded files from the previous time.
+
 #### Custom headers
 
 If you need to send some headers with your request (for example `Authorization` headers), 
@@ -149,6 +151,7 @@ In the final state it should look something like this:
   [buttonCaption]="'Select Images!'"
   [dropBoxMessage]="'Drop your images here!'"
   [extensions]="['jpg','png','gif']"
+  [uploadedFiles]="['http://example.com/path/to/my/file']"
   [class]="'customClass'"      
   (removed)="onRemoved($event)"
   (uploadFinished)="onUploadFinished($event)"
@@ -160,3 +163,4 @@ In the final state it should look something like this:
 
 @aberezkin
 @UncleDave
+@sabrio

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

@@ -1,23 +1,24 @@
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
-import { Headers } from '@angular/http';
+import {Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, ViewChild} from '@angular/core';
+import {Headers} from '@angular/http';
 
-import { ImageService } from './image.service';
-import { Style } from "./style";
-import { UploadMetadata } from './before-upload.interface';
+import {ImageService} from './image.service';
+import {Style} from "./style";
+import {UploadMetadata} from './before-upload.interface';
 
 export class FileHolder {
   public pending: boolean = false;
   public serverResponse: { status: number, response: any };
 
-  constructor(public src: string, public file: File) { }
+  constructor(public src: string, public file: File) {
+  }
 }
 
 @Component({
   selector: 'image-upload',
   templateUrl: './image-upload.component.html',
   styleUrls: ['./image-upload.component.css']
 })
-export class ImageUploadComponent implements OnInit {
+export class ImageUploadComponent implements OnInit, OnChanges {
 
   files: FileHolder[] = [];
   fileCounter: number = 0;
@@ -39,6 +40,7 @@ export class ImageUploadComponent implements OnInit {
   @Input('extensions') supportedExtensions: string[];
   @Input() url: string;
   @Input() withCredentials: boolean = false;
+  @Input() uploadedFiles: string[] | Array<{ url: string, fileName: string, blob?: Blob }> = [];
   @Output() removed: EventEmitter<FileHolder> = new EventEmitter<FileHolder>();
   @Output() uploadStateChanged: EventEmitter<boolean> = new EventEmitter<boolean>();
   @Output() uploadFinished: EventEmitter<FileHolder> = new EventEmitter<FileHolder>();
@@ -47,7 +49,8 @@ export class ImageUploadComponent implements OnInit {
   private inputElement: ElementRef;
   private pendingFilesCounter: number = 0;
 
-  constructor(private imageService: ImageService) { }
+  constructor(private imageService: ImageService) {
+  }
 
   ngOnInit() {
     if (!this.fileTooLargeMessage) {
@@ -71,6 +74,12 @@ export class ImageUploadComponent implements OnInit {
     this.removed.emit(file);
   }
 
+  ngOnChanges(changes) {
+    if (changes.uploadedFiles && changes.uploadedFiles.currentValue.length > 0) {
+      this.processUploadedFiles();
+    }
+  }
+
   onFileChange(files: FileList) {
     let remainingSlots = this.countRemainingSlots();
     let filesToUploadNum = files.length > remainingSlots ? remainingSlots : files.length;
@@ -99,6 +108,28 @@ export class ImageUploadComponent implements OnInit {
     }
   }
 
+  private processUploadedFiles() {
+    for (let i = 0; i < this.uploadedFiles.length; i++) {
+      let data: any = this.uploadedFiles[i];
+
+      let fileBlob: Blob,
+        file: File,
+        fileUrl: string;
+
+      if (data instanceof Object) {
+        fileUrl = data.url;
+        fileBlob = (data.blob) ? data.blob : new Blob([data]);
+        file = new File([fileBlob], data.fileName);
+      } else {
+        fileUrl = data;
+        fileBlob = new Blob([fileUrl]);
+        file = new File([fileBlob], fileUrl);
+      }
+
+      this.files.push(new FileHolder(fileUrl, file));
+    }
+  }
+
   private async uploadFiles(files: FileList, filesToUploadNum: number) {
     for (let i = 0; i < filesToUploadNum; i++) {
       const file = files[i];
@@ -110,7 +141,7 @@ export class ImageUploadComponent implements OnInit {
         continue;
       }
 
-      const beforeUploadResult: UploadMetadata = await this.beforeUpload({ file, url: this.url, abort: false });
+      const beforeUploadResult: UploadMetadata = await this.beforeUpload({file, url: this.url, abort: false});
 
       if (beforeUploadResult.abort) {
         this.fileCounter--;
@@ -139,11 +170,11 @@ export class ImageUploadComponent implements OnInit {
       this.imageService
         .postImage(this.url, fileHolder.file, this.headers, this.partName, customForm, this.withCredentials)
         .subscribe(
-        response => this.onResponse(response, fileHolder),
-        error => {
-          this.onResponse(error, fileHolder);
-          this.deleteFile(fileHolder);
-        });
+          response => this.onResponse(response, fileHolder),
+          error => {
+            this.onResponse(error, fileHolder);
+            this.deleteFile(fileHolder);
+          });
     } else {
       this.uploadFinished.emit(fileHolder);
     }