NG Upload Image to API

.gitignore

@@ -368,3 +368,4 @@ FodyWeavers.xsd
 
 src/server/.idea/.idea.FluentPOS/.idea/
 .DS_Store
+src/server/API/Files/**

src/client/src/app/modules/admin/catalog/components/product/product-form/product-form.component.ts

@@ -92,17 +92,14 @@ export class ProductFormComponent implements OnInit {
 
   onSubmit() {
     // TODO after successful update/insert, refresh table view in component product.component.ts
-    console.log(this.url);
-    // var upload = new Upload();
-    // upload.data = this.url;
-    // upload.name = this.url.
+
     if (this.productForm.valid) {
       if (this.productForm.get('id').value === '' || this.productForm.get('id').value == null) {
-        this.productService.createProduct(this.productForm.value).subscribe(response => {
+        this.productService.createProduct(this.productForm.value, this.upload).subscribe(response => {
           this.toastr.success(response.messages[0]);
         });
       } else {
-        this.productService.updateProduct(this.productForm.value).subscribe(response => {
+        this.productService.updateProduct(this.productForm.value, this.upload).subscribe(response => {
           this.toastr.success(response.messages[0]);
         });
       }

src/client/src/app/modules/admin/catalog/models/product.ts

@@ -17,5 +17,5 @@ export interface Product {
   isAlert?: boolean;
   alertQuantity: number;
   detail: string;
-  upload?: Upload;
+  uploadRequest?: Upload;
 }

src/client/src/app/modules/admin/catalog/services/product.service.ts

@@ -3,6 +3,7 @@ import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { ProductApiService } from 'src/app/core/api/catalog/product-api.service';
+import { Upload } from 'src/app/core/models/uploads/upload';
 import { IResult } from 'src/app/core/models/wrappers/IResult';
 import { PaginatedResult } from 'src/app/core/models/wrappers/PaginatedResult';
 import { Result } from 'src/app/core/models/wrappers/Result';
@@ -38,13 +39,16 @@ export class ProductService {
     return this.api.getById(id).pipe(map((response: Result<Product>) => response));
   }
 
-  createProduct(product: Product): Observable<IResult<Product>> {
+  createProduct(product: Product, upload: Upload): Observable<IResult<Product>> {
+    if (upload != undefined && upload.data != undefined) product.uploadRequest = upload;
     return this.api
       .create(product)
       .pipe(map((response: IResult<Product>) => response));
   }
 
-  updateProduct(product: Product): Observable<IResult<Product>> {
+  updateProduct(product: Product, upload: Upload): Observable<IResult<Product>> {
+    console.log(upload);
+    if (upload != undefined && upload.data != undefined) product.uploadRequest = upload;
     return this.api
       .update(product)
       .pipe(map((response: IResult<Product>) => response));

src/server/Shared/Shared.DTOs/Upload/UploadRequest.cs

@@ -16,6 +16,6 @@ public class UploadRequest
 
         public UploadType UploadType { get; set; }
 
-        public byte[] Data { get; set; }
+        public string Data { get; set; }
     }
 }

src/server/Shared/Shared.Infrastructure/Services/UploadService.cs

@@ -6,7 +6,9 @@
 // </copyright>
 // --------------------------------------------------------------------------------------------------
 
+using System;
 using System.IO;
+using System.Text.RegularExpressions;
 using System.Threading.Tasks;
 using FluentPOS.Shared.Core.Interfaces.Services;
 using FluentPOS.Shared.DTOs.Upload;
@@ -23,7 +25,9 @@ public Task<string> UploadAsync(UploadRequest request)
                 return Task.FromResult(string.Empty);
             }
 
-            var streamData = new MemoryStream(request.Data);
+            var base64Data = Regex.Match(request.Data, @"data:image/(?<type>.+?),(?<data>.+)").Groups["data"].Value;
+
+            var streamData = new MemoryStream(Convert.FromBase64String(base64Data));
             if (streamData.Length > 0)
             {
                 string folder = request.UploadType.ToDescriptionString();