Issue
I'm working on Angular-NestJs project. When I click on a product for update, the update form get's populated with all the info of the product and with image also, I'm using setter and getter for populating form. And in my update form I'm displaying the product's current image at the top, and at the botttom of the form I have an input of file type to choose new image If someone want to update the image. So when I select a new image at the bottom of the form, the first current image that is at the top of the form, just disappear and shows image break logo. And in console I get the error
GET http://localhost:3000/[object%20File] 404 (Not Found)
Before selecting new Image
After Selecting New Image
Image of the error
And when I click at the line pointed by blue arrow in the above image, it take me to the following piece of code and points at src
line ,where I'm am displaying my current image of the product
<span
class="text-center text-[1.25rem] text-green-600 font-bold mb-[-2rem]"
>
Current Image
</span>
<img
src="http://localhost:3000/{{
bookForm.value.image.toString().replace('./assets', '')
}}"
alt=""
class="p-[0.5rem] h-[300px] w-[300px]"
/>
Form to load previous content of the product
bookForm!: FormGroup;
ngOnInit(): void {
const bookData = this.service.bookGetter();
this.bookForm = new FormGroup({
_id: new FormControl(bookData?._id),
name: new FormControl(bookData?.name, [Validators.required]),
author: new FormControl(bookData?.author, [Validators.required]),
price: new FormControl(bookData?.price, [Validators.required]),
image: new FormControl(bookData?.image, [Validators.required]),
});
console.log('After', this.bookForm.value);
}
Function to select new images in ts
imagedata?: string;
async attachFile(event: any) {
const file = (event.target as HTMLInputElement).files![0];
this.bookForm.patchValue({ image: file });
const allowedMimeTypes = ['image/png', 'image/jpeg', 'image/jpg'];
this.bookForm.get('image')?.updateValueAndValidity();
if (file && allowedMimeTypes.includes(file.type)) {
const reader = new FileReader();
reader.onloadend = () => {
this.imagedata = reader.result as string;
};
reader.readAsDataURL(file);
console.log(file);
}
}
html where function is called
<div class="imagediv flex flex-col items-start">
<span class="text-center text-[1.25rem] text-green-600 font-bold">
Choose New Image
</span>
<input class="" type="file" (change)="attachFile($event)" />
<br />
<img
*ngIf="imagedata"
[src]="imagedata"
alt=""
class="p-[0.5rem] h-[200px] w-[200px]"
/>
</div>
Solution
You're mixing old image and new, i.e. uploaded image from the server is being replaced by new image File object, and there is no new image yet, so localhost part will never display image like that.
Solution might be to split it, and add a new form control for a new image:
newImage: new FormControl('')
this.bookForm.patchValue({ newImage: file });
Answered By - traynor
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.