I am currently working on implementing an image upload feature for my angular 5 website. I have integrated ngx-Pica for client-side image resizing, but I am facing challenges with the UI freezing during the resize process. I would greatly appreciate any suggestions or ideas on how to prevent this freeze.
The sizes of the images being uploaded are as follows: (all added simultaneously)
- 2.6mb
- 1.7mb
- 3.46mb
I'm puzzled about what is causing this issue and I welcome any assistance in resolving it.
Approaches I've experimented with
I attempted removing
changeDetectorRef.detectChanges()The freezing problem disappears when uploading images without resizing them (by excluding the call to this._ngxPicaService.resizeImage)
I went through the source code thoroughly but couldn't find any glaringly obvious issues
I aim to provide users with the option to upload images of any size without restrictions, but a frozen UI is unacceptable
import { Component, ViewEncapsulation, ChangeDetectorRef } from '@angular/core';
import { NgxPicaService, NgxPicaErrorInterface, NgxPicaResizeOptionsInterface, NgxPicaImageService } from 'ngx-pica';
import { AspectRatioOptions } from 'ngx-pica/src/ngx-pica-resize-options.interface';
@Component({
selector: 'az-multiple-image-uploader',
encapsulation: ViewEncapsulation.None,
templateUrl: './multiple-image-uploader.component.html',
styleUrls: ['./multiple-image-uploader.component.scss']
})
export class MultipleImageUploaderComponent {
public images: File[] = [];
constructor(
private _changeDetectorRef: ChangeDetectorRef,
private _ngxPicaService: NgxPicaService,
private _ngxPicaImageService: NgxPicaImageService
) { }
fileChange(input){
this.handleFiles(input.files);
}
private addLoadingAnimations(numberToAdd: number): void {
var spinner = require("assets/img/Spinner.svg");
for(var i =0; i < numberToAdd; i++)
{
this.images.push(spinner);
}
}
public handleFiles(files: any) {
var listLength = this.images.length;
this.addLoadingAnimations(files.length);
var width = 1024;
var height = 683;
for(var index = 0; index < files.length; index++){
this._ngxPicaService.resizeImage(files[index], width, height, new ImageResizeOptions())
.subscribe((imageResized: File) => {
let reader: FileReader = new FileReader();
reader.addEventListener('load', (event: any) => {
this.images.splice(listLength, 1);
this.images[listLength] = event.target.result;
listLength += 1;
this._changeDetectorRef.detectChanges();
}, false);
reader.readAsDataURL(imageResized);
}, (err: NgxPicaErrorInterface) => {
throw err.err;
});
}
}
removeImage(index):void{
this.images.splice(index, 1);
}
}
export class ImageResizeOptions implements NgxPicaResizeOptionsInterface
{
aspectRatio = new ImageAspectRatioOptions(true);
}
export class ImageAspectRatioOptions implements AspectRatioOptions {
keepAspectRatio: boolean;
forceMinDimensions?: boolean;
constructor(keepAspectRatio: boolean, forceMinDimensions?: boolean) {
this.keepAspectRatio = keepAspectRatio;
this.forceMinDimensions = forceMinDimensions;
}
}
<div class="col-8 mx-auto">
<input type="file" multiple (change)="fileChange(input)" #input class="m-img-upload-btn"/>
<button class="btn btn-success btn-block" type="button">
<i class="fa fa-upload"></i> Images...
</button>
</div>
<div class="card images-container">
<div *ngFor="let image of images; let i=index;" class="m-image-wrapper">
<i class="fa fa-times m-delete-img" (click)="removeImage(i)"></i>
<img [src]="image">
</div>
</div>