Trying upload image to categories

Author: sergio-gomezg

angular/wallypop/src/app/components/category/category.component.html

@@ -150,7 +150,7 @@ <h3 class="text-info">Foto</h3>
                         <p>¡Añade una foto a la categoría!</p>
                         <div class="form-group">
                             <div class="custom-input-file">
-                                <input accept=".jpg, .jpeg" class="input-file" name="imageField" size="1" type="file"/>
+                                <input #file accept=".jpg, .jpeg" class="input-file" name="imageField" size="1" type="file"/>
                                 <i aria-hidden="true" class="fa fa-picture-o"></i>
                             </div>
                             <br>

angular/wallypop/src/app/components/category/category.component.ts

@@ -1,4 +1,5 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, OnInit, ViewChild} from '@angular/core';
+import { Router } from '@angular/router';
 import { Category } from 'src/app/models/category.model';
 import {CategoryService} from '../../services/category.service';
 import {LoginService} from '../../services/login.service';
@@ -11,7 +12,12 @@ export class CategoryComponent implements OnInit{
 
     categories: Category[];
 
-    constructor(public categoryService: CategoryService, public loginService: LoginService) {
+    @ViewChild("file")
+    file: any;
+
+    removeImage:boolean;
+
+    constructor(public categoryService: CategoryService, public loginService: LoginService, private router: Router) {
     }
 
     ngOnInit(): void {
@@ -25,4 +31,28 @@ export class CategoryComponent implements OnInit{
         event.preventDefault();
         this.categoryService.addCategory(title,description,icon);
     }
+
+    uploadImage(categoryImage: Category): void {
+
+        const image = this.file.nativeElement.files[0];
+        if (image) {
+          let formData = new FormData();
+          formData.append("imageField", image);
+          this.categoryService.setCategoryImage(categoryImage, formData).subscribe(
+            _ => this.afterUploadImage(categoryImage),
+            error => alert('Error uploading category image: ' + error)
+          );
+        } else if(this.removeImage){
+          this.categoryService.deleteCategoryImage(categoryImage).subscribe(
+            _ => this.afterUploadImage(categoryImage),
+            error => alert('Error deleting book image: ' + error)
+          );
+        } else {
+          this.afterUploadImage(categoryImage);
+        }
+      }
+    
+      private afterUploadImage(afterCategoryImage: Category){
+        this.router.navigate(['/category/', afterCategoryImage.id_CATEGORY]);
+      }
 }