Make edit images work
This commit is contained in:
@@ -1,4 +1,4 @@
|
|||||||
import { Component } from '@angular/core';
|
import { Component, ElementRef, ViewChild } from '@angular/core';
|
||||||
import { HttpClient } from '@angular/common/http';
|
import { HttpClient } from '@angular/common/http';
|
||||||
import { FormsModule } from '@angular/forms';
|
import { FormsModule } from '@angular/forms';
|
||||||
import { Router, ActivatedRoute } from '@angular/router';
|
import { Router, ActivatedRoute } from '@angular/router';
|
||||||
@@ -13,6 +13,7 @@ import { Product } from 'app/models/Product';
|
|||||||
imports: [ FormsModule, CommonModule ]
|
imports: [ FormsModule, CommonModule ]
|
||||||
})
|
})
|
||||||
export class EditItemComponent {
|
export class EditItemComponent {
|
||||||
|
@ViewChild('FileUpload') InputDOM!: ElementRef<HTMLInputElement>;
|
||||||
|
|
||||||
readonly maxFileMB = 16;
|
readonly maxFileMB = 16;
|
||||||
|
|
||||||
@@ -45,6 +46,7 @@ export class EditItemComponent {
|
|||||||
http.get("api/productimage/get?ProductID=" + img.productID + "&ImageID=" + img.imageID, { responseType: 'blob' }).subscribe(blob => {
|
http.get("api/productimage/get?ProductID=" + img.productID + "&ImageID=" + img.imageID, { responseType: 'blob' }).subscribe(blob => {
|
||||||
img.imageSrc = URL.createObjectURL(blob);
|
img.imageSrc = URL.createObjectURL(blob);
|
||||||
this.imagePreviews.push(img.imageSrc);
|
this.imagePreviews.push(img.imageSrc);
|
||||||
|
this.selectedFiles.push(new File([blob], "EmptyName", {type: "image/jpeg"}));
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
@@ -62,8 +64,6 @@ export class EditItemComponent {
|
|||||||
imagePreviews: string[] = [];
|
imagePreviews: string[] = [];
|
||||||
onFileSelected(event: Event){
|
onFileSelected(event: Event){
|
||||||
const fileInput = event.target as HTMLInputElement;
|
const fileInput = event.target as HTMLInputElement;
|
||||||
this.imagePreviews = [];
|
|
||||||
this.selectedFiles = [];
|
|
||||||
|
|
||||||
if (!fileInput.files?.length){
|
if (!fileInput.files?.length){
|
||||||
return;
|
return;
|
||||||
@@ -83,13 +83,19 @@ export class EditItemComponent {
|
|||||||
this.imagePreviews.push(reader.result as string);
|
this.imagePreviews.push(reader.result as string);
|
||||||
}
|
}
|
||||||
reader.readAsDataURL(file);
|
reader.readAsDataURL(file);
|
||||||
|
|
||||||
|
this.InputDOM.nativeElement.value = '';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
RemovePhoto(imagePreview: string){
|
||||||
|
let i = this.imagePreviews.indexOf(imagePreview);
|
||||||
|
this.imagePreviews.splice(i, 1);
|
||||||
|
this.selectedFiles.splice(i, 1);
|
||||||
|
}
|
||||||
|
|
||||||
onSubmit(){
|
onSubmit(){
|
||||||
|
|
||||||
const formData = new FormData();
|
const formData = new FormData();
|
||||||
|
|
||||||
// Append non-file fields
|
// Append non-file fields
|
||||||
formData.append("Name", this.newItem.name);
|
formData.append("Name", this.newItem.name);
|
||||||
formData.append("Description", this.newItem.description);
|
formData.append("Description", this.newItem.description);
|
||||||
|
|||||||
Reference in New Issue
Block a user