Add image functionalitly to frontend

src/MistoxWebsite.Client/src/app/models/Product.ts

@@ -3,7 +3,13 @@ export class Product {
     public name: string = "";
     public description: string = "";
     public curShowingIMG: number = 0;
-    public images: File[] = [];
+    public images: ProductImage[] = [];
     public cost: number = 0;
     public url: string = "";
+}
+
+export class ProductImage {
+  imageID: number = 0;
+  productID: number = 0;
+  image: File | null = null;
 }

src/MistoxWebsite.Client/src/app/pages/store/admin/newitem/new.component.html

@@ -24,7 +24,7 @@
   <div class="frame-item">
     <!-- Need to fix for image file upload -->
      <div id="FileUploadPlaceholder" ></div>
-    <input type="file" (change)="onFileSelected($event)" />
+    <input type="file" (change)="onFileSelected($event)" accept="image/*" />
   </div>
 
   <div class="flex-row">
@@ -36,4 +36,11 @@
   <ul *ngIf="errorMsgs.length > 0" >
     <li *ngFor="let msg of errorMsgs" >{{ msg }}</li>
   </ul>
-</form>
+</form>
+
+<!-- Finish file preview for uploads -->
+<div class="center big-frame background-border">
+  <div *ngFor="let cur of imagePreviews" id="imageHolder">
+    <img [src]="cur" alt="Image Preview" style="max-width: 200px;"/>
+  </div>
+</div>

src/MistoxWebsite.Client/src/app/pages/store/admin/newitem/new.component.ts

@@ -5,7 +5,7 @@ import { Router, ActivatedRoute } from '@angular/router';
 import { Title } from '@angular/platform-browser';
 import { CommonModule } from '@angular/common';
 import { Authentication } from '../../../../services/Authentication';
-import { Product } from 'app/models/Product';
+import { Product, ProductImage } from 'app/models/Product';
 
 @Component({
   selector: 'item-new',
@@ -15,8 +15,9 @@ import { Product } from 'app/models/Product';
 })
 export class NewItemComponent {
 
-  newItem: Product = new Product();
+  readonly maxFileMB = 16;
 
+  newItem: Product = new Product();
   errorMsgs: string[] = [];
 
   constructor( private http: HttpClient, private router: Router, private route: ActivatedRoute, private title: Title, public auth: Authentication ) {
@@ -28,15 +29,39 @@ export class NewItemComponent {
   }
 
   selectedFiles: File[] = [];
-  onFileSelected(event: any){
+  imagePreviews: string[] = [];
-    this.selectedFiles = event.target.files;
+  onFileSelected(event: Event){
+    const fileInput = event.target as HTMLInputElement;
+    this.imagePreviews = [];
+
+    if (!fileInput.files?.length){
+      return;
+    }
+
+    for (let i=0; i<fileInput.files.length; i++){
+      let file = fileInput.files[i];
+      if (file.size > this.maxFileMB * 1024 * 1024){
+        this.errorMsgs.push("File exceeds max file size of 16MB");
+        continue;
+      }
+      // No issues add file to the list
+      this.selectedFiles.push( file );
+
+      const reader = new FileReader();
+      reader.onload= () => {
+        this.imagePreviews.push(reader.result as string);
+      }
+      reader.readAsDataURL(file);
+    }
   }
 
   onSubmit(){
     // Add uploaded files to dto
     if (this.selectedFiles.length > 0){
       for(let i=0; i<this.selectedFiles.length; i++){
-        this.newItem.images.push( this.selectedFiles[i] );
+        let building = new ProductImage();
+        building.image = this.selectedFiles[i];
+        this.newItem.images.push( building );
       };
     }
 

src/MistoxWebsite.Server/Services/DatabaseService/ProductImage.cs

@@ -84,8 +84,6 @@ namespace MistoxWebsite.Server.Services.DatabaseService {
             return new FormFile(stream, 0, fileBytes.Length, "file", Guid.NewGuid().ToString()) {
                 Headers = new HeaderDictionary()
             };
-}
+        }
-
-
     }
 }