Estoy tratando de cargar varias imágenes almacenándolas en una matriz. Cada imagen se almacena como un objeto de archivo como este:

Quiero enviar mis imágenes como objetos de archivo, no como base64. Sin embargo, cuando trato de obtener una vista previa de las imágenes, solo se muestra repetidamente la última imagen seleccionada (captura de pantalla a continuación):

Quiero obtener una vista previa de todas las imágenes seleccionadas, no solo una imagen 4 veces.

Stackblitz de trabajo !

Aquí está mi código:

 onSelectFile(event) { this.file = event.target.files && event.target.files.length if (this.file > 0 && this.file < 5) { let i: number = 0; for (const singlefile of event.target.files) { var reader = new FileReader(); reader.readAsDataURL(singlefile); this.urls.push(singlefile); this.cf.detectChanges() i++; console.log(this.urls) reader.onload = (eventFile: any) => { this.url = eventFile.target.result; this.cf.detectChanges() } //console.log(singlefile) }; } else { this.toast.error('No More than 4 images', 'Upload Images') } }

Mi HTML:

 <div class="preview-media" data-max-image="4" style="margin-top: -20px; width: auto; height:auto; display: flex; flex-wrap: wrap; object-fit: cover;"> <ng-container *ngFor="let singlefile of urls"> <img [src]="url" style="flex-grow: 1; flex-direction: row; flex-wrap: wrap; width: 50%; height: auto; object-fit: cover;"> </ng-container> </div>

Cualquier ayuda es muy apreciada. Gracias.