So I have been using Angular and Typescript for a long time. I cannot seem to find out what the Type for an Input file is.
For example:
<input type="file" (change)="fileChangeEvent($event)">
fileChangeEvent(e:?????){}
All examples purely just uses event without any type, and I am curious to know if such a type even exists.
Angular 10 and above:
component.html
<input type="file" (change)="upload($event)">
component.ts
upload(event: Event) {
const target = event.target as HTMLInputElement;
const files = target.files as FileList;
console.log(files);
}
One line statement to get the file Type:
fileInput: any
fetchFileType($event);
fetchFileType(fileInput: any) {
fileName = this.fileInput.target.files[0];
fileType = fileName.type;
}
For Angular 10 strict-type mode, we need to mention type in parameters. You can follow this way to achieve file-list from file input event
// HTML
<input type="file" (change)="uploadFile($event)">
// TS
uploadFile(event: Event) {
const element = event.currentTarget as HTMLInputElement;
let fileList: FileList | null = element.files;
if (fileList) {
console.log("FileUpload -> files", fileList);
}
}
Hope this helps. Please share your feedback.
The type is Event
fileChangeEvent(e: Event){}
Use File
The File interface provides information about files and allows JavaScript in a web page to access their content.
Try this
component.html
<input type="file" (change)="fileChangeEvent($event.target.files)">
component.ts
fileChangeEvent(e: File[]){
fileName = e[0];
fileType = fileName.type;
}