Need to merge this.imageData inside this.files to preview multiple image and need to delete on click as well before uploading.
Component.ts file
files: any = [];
imageData = new Array<string>();
handleMultiFileSelect(event: any, controlName: any) {
if (event.target) {
this.imageData = [];
let filesPath = event.target.files;
for (let file of filesPath) {
let reader = new FileReader();
reader.onload = (e: any) => {
this.imageData.push(e.target.result);
}
reader.readAsDataURL(file);
}
let f = Array.from(event.target.files);
this.files = this.files.concat(f);
setTimeout(() => {
this.recreateSlider("art-images-temp");
}, 0);
} else {
this.files = event;
setTimeout(() => {
this.recreateSlider("art-images-temp");
}, 0);
}
this.modalService.dismissAll();
}
component.html file
<ul><li
class="text-center"
*ngFor="
let item of files;
let i = index
"
>
<div >
<div class="ml-2">
<img [src]="imageData[i]" width="100">
</div>
<div>
<button
type="button"
class="btn btn-danger btn-sm text-center"
(click)="
deleteTempFile(i)
"
>
<span
><i
class="zmdi zmdi-close"
></i
></span>
</button>
</div>
</div>
</li>
</ul>
this.files Console Result
[
{
lastModified : 1661791153500
lastModifiedDate : Mon Aug 29 2022 22:09:13 GMT+0530 (India Standard Time) {}
name : "29-08-2022-1.jpg"
size : 55295
type : "image/jpeg"
webkitRelativePath : ""
},
{
lastModified : 1661791153500
lastModifiedDate : Mon Aug 29 2022 22:09:13 GMT+0530 (India Standard Time) {}
name : "29-08-2022-2.jpg"
size : 55295
type : "image/jpeg"
webkitRelativePath : ""
},
]
Required Result
[
{
lastModified : 1661791153500
lastModifiedDate : Mon Aug 29 2022 22:09:13 GMT+0530 (India Standard Time) {}
name : "29-08-2022-1.jpg"
size : 55295
src : "temp image file"
type : "image/jpeg"
webkitRelativePath : ""
},
{
lastModified : 1661791153500
lastModifiedDate : Mon Aug 29 2022 22:09:13 GMT+0530 (India Standard Time) {}
name : "29-08-2022-2.jpg"
size : 55295
src : "temp image file"
type : "image/jpeg"
webkitRelativePath : ""
},
]
Angular Js taking 725425ms on "ng serve --source-map=false". Can i know why angular js taking this much time on any changes done in the coding. great if i know the solution for this one