From d4680bd190f7d348d5fb64b00b9d6c6d7a425fdf Mon Sep 17 00:00:00 2001
From: Ivaylo Ivanov <me@ivayloivanov.eu>
Date: Sat, 21 Mar 2020 10:41:21 +0100
Subject: [PATCH] US02: Add UI for image upload

---
 frontend/wendys-friends/package.json          |  3 +
 .../add-horse/add-horse.component.html        |  5 ++
 .../add-horse/add-horse.component.ts          | 55 ++++++++++++++++++-
 frontend/wendys-friends/src/app/dto/horse.ts  |  1 +
 .../src/app/service/horse.service.ts          | 13 +++++
 5 files changed, 76 insertions(+), 1 deletion(-)

diff --git a/frontend/wendys-friends/package.json b/frontend/wendys-friends/package.json
index 6379fab..16f244b 100644
--- a/frontend/wendys-friends/package.json
+++ b/frontend/wendys-friends/package.json
@@ -46,5 +46,8 @@
     "ts-node": "8.6.2",
     "tslint": "6.0.0",
     "typescript": "3.7.5"
+  },
+  "browser": {
+    "crypto": false
   }
 }
diff --git a/frontend/wendys-friends/src/app/component/add-horse/add-horse.component.html b/frontend/wendys-friends/src/app/component/add-horse/add-horse.component.html
index 5e603ee..db14c5b 100644
--- a/frontend/wendys-friends/src/app/component/add-horse/add-horse.component.html
+++ b/frontend/wendys-friends/src/app/component/add-horse/add-horse.component.html
@@ -51,6 +51,11 @@
       <input type="date" class="form-control" name="birthday" [(ngModel)]="horse.birthday" required pattern="\d{4}-\d{2}-\d{2}">
     </div>
 
+    <div class="form-group">
+      <label for="image">Image</label>
+      <input type="file" class="form-control-file" name="image" id="image" (change)="handleImageInput($event.target.files)" required>
+    </div>
+
     <button type="submit" class="btn btn-success" [disabled]="!horseForm.form.valid" (submit)="addHorse()">Submit</button>
   </form>
 </div>
\ No newline at end of file
diff --git a/frontend/wendys-friends/src/app/component/add-horse/add-horse.component.ts b/frontend/wendys-friends/src/app/component/add-horse/add-horse.component.ts
index 1ec47ca..cbd27c1 100644
--- a/frontend/wendys-friends/src/app/component/add-horse/add-horse.component.ts
+++ b/frontend/wendys-friends/src/app/component/add-horse/add-horse.component.ts
@@ -11,7 +11,8 @@ export class AddHorseComponent implements OnInit {
   error = false;
   success: string;
   errorMessage = '';
-  horse: Horse = new Horse(null, null, null, null, null, null, null);
+  horse: Horse = new Horse(null, null, null, null, null, null, null, null);
+  imageToUpload: File = null;
 
   constructor(private horseService: HorseService) { }
 
@@ -49,6 +50,58 @@ export class AddHorseComponent implements OnInit {
     );
   }
 
+  /**
+   * Handles the input on the image input.
+   * Inspired from:
+   * https://stackoverflow.com/questions/47936183/angular-file-upload
+   * @param files
+   */
+  public handleImageInput(files: FileList) {
+    var imageFile: File = files.item(0);
+
+    // Generate a random bytes name to avoid conflicts
+    var fileExt: string = imageFile.name.split('.').pop();
+    var newFileName: string = this.generateHex(20) + '.' + fileExt;
+    this.horse.imagePath = newFileName;
+
+    // Upload the file
+    this.uploadFile(imageFile, newFileName)
+  }
+
+  /**
+   * Uploads the file to the backend with the specified file name
+   * @param file
+   * @param newFileName
+   */
+  private uploadFile(file: File, newFileName: string){
+    this.horseService.postFile(file, newFileName).subscribe(
+      () => {
+        console.log("Image successfully uploaded");
+      }, error => {
+        this.defaultServiceErrorHandling(error)
+      });
+  }
+
+  /**
+   * Generates a random hex with the specified length
+   * Inspired from:
+   * https://stackoverflow.com/a/27747377
+   * @param len
+   */
+  private generateHex(len: number): string {
+    var arr = new Uint8Array((len) / 2)
+    window.crypto.getRandomValues(arr)
+    return Array.from(arr, this.dec2hex).join('')
+  }
+
+  /**
+   * Converts a decimal to its hex value
+   * @param dec
+   */
+  private dec2hex(dec: number): string {
+    return ('0' + dec.toString(16)).substr(-2)
+  }
+
   private defaultServiceErrorHandling(error: any) {
     console.log(error);
     this.error = true;
diff --git a/frontend/wendys-friends/src/app/dto/horse.ts b/frontend/wendys-friends/src/app/dto/horse.ts
index 983db33..219173a 100644
--- a/frontend/wendys-friends/src/app/dto/horse.ts
+++ b/frontend/wendys-friends/src/app/dto/horse.ts
@@ -6,6 +6,7 @@ export class Horse {
     public score: number,
     public birthday: Date,
     public race: ERace,
+    public imagePath: String,
     public owner: number) {
   }
 }
diff --git a/frontend/wendys-friends/src/app/service/horse.service.ts b/frontend/wendys-friends/src/app/service/horse.service.ts
index ecfb9ac..3774b24 100644
--- a/frontend/wendys-friends/src/app/service/horse.service.ts
+++ b/frontend/wendys-friends/src/app/service/horse.service.ts
@@ -30,4 +30,17 @@ export class HorseService {
     console.log('Add new horse ' + JSON.stringify(horse));
     return this.httpClient.post<Horse>(this.messageBaseUri, horse);
   }
+
+  /**
+   *
+   */
+  postFile(fileToUpload: File, newFileName: string): Observable<Object> {
+    // Prepare the form
+    var formData: FormData = new FormData();
+    formData.append('file', fileToUpload, newFileName);
+
+    // Upload the image and return the result
+    return this.httpClient
+      .post(this.messageBaseUri + '/upload', formData);
+  }
 }