US02: Add UI for image upload

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
   }
 }

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>

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;

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) {
   }
 }

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);
+  }
 }