To access the file upload control and clear its value after each upload, you can utilize a combination of @ViewChild and ElementRef. This ensures that the (change) event triggers appropriately.
Additionally, you can employ FileReader() to read the file into an Image object and extract its width and height.
Below is the code snippet for achieving this:
HTML template
<input type="file" #coverFilesInput (change)="onChange($event)" class="file-input" />
Upload Percent: {{percentDone}}% <br />
<ng-container *ngIf="uploadSuccess">
Upload Successful of file with size : {{size}} bytes <br>
The image height is : {{height}} <br>
The image width is : {{width}} <br>
</ng-container>
The onChange method
onChange(evt:any){
this.percentDone = 100;
this.uploadSuccess = true;
let image:any = evt.target.files[0];
this.size = image.size;
let fr = new FileReader();
fr.onload = () => { // when file has loaded
var img = new Image();
img.onload = () => {
this.width = img.width;
this.height = img.height;
};
img.src = fr.result; // The data URL
};
fr.readAsDataURL(image);
this.imgType.nativeElement.value = ""; // clear the value after upload
}
complete code app.component.ts
import { Component, VERSION ,ViewChild,ElementRef} from '@angular/core';
import {HttpClientModule, HttpClient, HttpRequest, HttpResponse, HttpEventType} from '@angular/common/http';
@Component({
selector: 'my-app',
template: `
Version = {{version.full}} <br/>
<input type="file" #coverFilesInput (change)="onChange($event)" class="file-input" />
Upload Percent: {{percentDone}}% <br />
<ng-container *ngIf="uploadSuccess">
Upload Successful of file with size : {{size}} bytes <br>
The image height is : {{height}} <br>
The image width is : {{width}} <br>
</ng-container>
`,
})
export class AppComponent {
percentDone: number;
uploadSuccess: boolean;
size:any;
width:number;
height:number;
@ViewChild('coverFilesInput') imgType:ElementRef;
constructor(
) { }
version = VERSION
onChange(evt:any){
this.percentDone = 100;
this.uploadSuccess = true;
let image:any = evt.target.files[0];
this.size = image.size;
let fr = new FileReader();
fr.onload = () => { // when file has loaded
var img = new Image();
img.onload = () => {
this.width = img.width;
this.height = img.height;
};
img.src = fr.result; // This is the data URL
};
fr.readAsDataURL(image);
this.imgType.nativeElement.value = "";
}
}
Here is a working demo : https://stackblitz.com/edit/angular-file-upload-hnik7q
Edit : Another approach is to use [(ngModel)]="selectedFile" to manage the input file control's value without the need for @ViewChild and ElementRef. Here's how it can be implemented:
<input type="file" #coverFilesInput (change)="onChange($event)" class="file-input" [(ngModel)]="selectedFile"/>
and in component class -
export class AppComponent {
percentDone: number;
uploadSuccess: boolean;
size:any;
width:number;
height:number;
selectedFile:any; // declare the property
constructor(
) { }
version = VERSION
onChange(evt:any){
this.percentDone = 100;
this.uploadSuccess = true;
let image:any = evt.target.files[0];
this.size = image.size;
let fr = new FileReader();
fr.onload = () => { // when file has loaded
var img = new Image();
img.onload = () => {
this.width = img.width;
this.height = img.height;
};
img.src = fr.result; // This is the data URL
};
fr.readAsDataURL(image);
this.selectedFile = ""; // clear the file here
}
}