I have a simple app where user can upload one or multiple images. In preview mode, user has to add description to each of the image and then he can upload the images with pictures. They are then added to the end of the existing pictures.
Here is the link to the code: https://stackblitz.com/edit/angular-12-multiple-image-upload-preview-arzita?file=src/app/components/upload-images/upload-images.component.html
My problem though is that when I upload, the first occurance of the textbox input is shown with each picture. Do you have any idea how to have for each picture it´s own description?
Thank you.
What am I expecting: I want for each picture it´s onw unique description.
CodePudding user response：
In this case its better to use template-driven-forms method in angular rather than using reactive-forms method. In template driven methodology its simple as maintaining an object array with base64 image and its name/description.
Please find the below code and working stackblitz here.
template.html :
<div>
<ng-container>
<input
type="file"
id="file"
multiple
accept=".png, .jpg, .jpeg, .pdf"
(change)="getFileDetails($event)"
/>
<button (click)="uploadFiles()">Upload</button>
</ng-container>
</div>
<pre>{{ myFiles | json }}</pre>
<div *ngFor="let file of myFiles">
<p>{{file.name}}</p>
<img src="{{ file.img }}" alt="{{ file.name }}" height="80px" />
</div>
component.ts :
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
myFiles: any[] = [];
sMsg: string = '';
desc: any;
fileName: any;
ngOnInit() {}
getFileDetails(e) {
for (var i = 0; i < e.target.files.length; i ) {
if (e) {
this.setName(e.target.files[0].name);
const reader = new FileReader();
console.log(e.target.files[0].name);
reader.onload = this.handleReaderLoaded.bind(this);
reader.readAsBinaryString(e.target.files[0]);
}
}
}
setName(e) {
this.fileName =e;
}
handleReaderLoaded(e) {
let val = {
name: this.fileName,
img: 'data:image/png;base64,' btoa(e.target.result),
};
this.myFiles.push(val);
this.fileName=null;
}
uploadFiles() {
const frmData = new FormData();
for (var i = 0; i < this.myFiles.length; i ) {
frmData.append('fileUpload', this.myFiles[i]);
}
}
}
CodePudding user response：
That is happening becouse you are pushing the wrong value of array.
Form is always updated at her own. Always check consol logs.
this.uploadService.data.push(<Picture>{
imageSrc: this.previews[idx],
imageDesc: this.descriptionForm.get('description').value,
});Modifications below.