file Input Event type in Angular

Question

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.

Chintan Joshi · Accepted Answer · 2020-09-04 05:13:36Z

64

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.

edited Sep 4, 2020 at 5:13

answered Sep 1, 2020 at 11:06

Chintan Joshi

1,3471 gold badge9 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Slava Dobromyslov Over a year ago

Be careful with event.currentTarget. It contains an element to which the attached is handler but not an element which triggered the event.

AnorZaken Over a year ago

As the above commenter said, should be event.target See Comparison of Event Targets.

jgritten Over a year ago

how do you avoid the unresponsive change event if you select the same file twice?

hlovdal Jul 21 at 22:16

Even better than a type cast is an instance of check:

uploadFile(event: Event) {          if (!(event.target instanceof HTMLInputElement)) {              console.error("Unexpected event", event);              return;          }          const element: HTMLInputElement = event.target;          ...      }

.

Sajad · Accepted Answer · 2020-12-24 08:40:17Z

36

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);
  }

edited Dec 24, 2020 at 8:40

answered Dec 24, 2020 at 8:29

Sajad

3,8873 gold badges23 silver badges23 bronze badges

Comments

Random · Accepted Answer · 2021-06-14 14:32:35Z

23

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;
}

edited Jun 14, 2021 at 14:32

Random

3,2551 gold badge18 silver badges25 bronze badges

answered Dec 6, 2019 at 6:58

Chellappan வ

27.9k4 gold badges39 silver badges69 bronze badges

7 Comments

Vaaljan Over a year ago

That could work since you pass in files with is Type File. But still begs the question what type is $event. Just weird that there is no clear answer.

OJVM Over a year ago

It works, but it needs and adjustment, instead of fileName = e.files[0]; it must be const fileName = e[0].name; thank you.

Jerome Kelly Over a year ago

Also, it does not change a lot, but e won't be an array of File, but a FileList. The most noticeable difference is that FileList does not implement the Iterator protocol, so for of loop will not work. developer.mozilla.org/en-US/docs/Web/API/FileList

PhiLho Over a year ago

We used to do that (with type FileList | readonly File[]), but if we activate Ivy's strictTemplates options, it errors on these lines: TS2339: Property 'files' does not exist on type 'EventTarget' and TS2531: Object is possibly 'null'. So either we use the ugly $any($event.target).files, or we are back to type $event.

Chellappan வ Over a year ago

IF you try $event.target?.files is it working?

|

Tristan M · Accepted Answer · 2023-07-20 19:14:21Z

2

If the type does not exist, manually build what you expect

<input type="file" (change)="fileChangeEvent($event)">

fileChangeEvent(e: Event & {target: HTMLInputElement & { files: FileList | null}}){}

answered Jul 20, 2023 at 19:14

Tristan M

3023 silver badges13 bronze badges

Comments

Ayoub k · Accepted Answer · 2024-07-24 22:58:13Z

0

In angular 18

<input type="file" class="hidden" accept=".xlsx" #upload (click)="uploadFile($event)" />

uploadFile(event: Event): void {
  const element = event.currentTarget as HTMLInputElement;
  const file = element?.files?.[0];
  if (file) {
    ...
  }
}

answered Jul 24, 2024 at 22:58

Ayoub k

9,03811 gold badges43 silver badges66 bronze badges

Comments

Sudarshana Dayananda · Accepted Answer · 2019-12-06 06:57:53Z

-1

The type is Event

fileChangeEvent(e: Event){}

answered Dec 6, 2019 at 6:57

Sudarshana Dayananda

5,2652 gold badges27 silver badges45 bronze badges

2 Comments

Vaaljan Over a year ago

Problem with using Event is. if you type e.target it only has 3 functions on that Type. AddEventListener, DispatchEvent, RemoveEventListener. So technically the type is not correct.

Eskir Over a year ago

Depends on what you import I guess, VSC auto-suggested the right "Event" type right away in my case

ssuperczynski · Accepted Answer · 2020-09-14 11:35:20Z

-6

One line statement to get the file Type:

fileInput: any
fetchFileType($event);

fetchFileType(fileInput: any) {
  fileName = this.fileInput.target.files[0];
  fileType = fileName.type;
}

edited Sep 14, 2020 at 11:35

ssuperczynski

3,4463 gold badges46 silver badges64 bronze badges

answered Jun 11, 2020 at 12:38

Pankaj Kumar

194 bronze badges

1 Comment

Vaaljan Over a year ago

any should really not be used if absolutely necessary. Plus That is exactly what the question was about. The Type.

Collectives™ on Stack Overflow

file Input Event type in Angular

7 Answers 7

4 Comments

Comments

7 Comments

Comments

Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

4 Comments

Comments

7 Comments

Comments

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related