Event type for file upload from INPUT element

Question

I'm using the following code for reading in contents of a locally stored file.

onFile(event: any) {
  console.log(event);
  const file = event.target.files[0];
  const reader = new FileReader();
  reader.onloadend = (ev: any) => { console.log(ev); };
  reader.readAsText(file);
}

Investigating the two console outputs, I see that the two types printed out are Event and ProgressEvent. So I've refactored my methods to correspond the types of the parameters like so.

onFile(event: Event) {
  console.log(event);
  const file = event.target.files[0];
  const reader = new FileReader();
  reader.onloadend = (ev: ProgressEvent) => { console.log(ev, $event.target.result); };
  reader.readAsText(file);
}

However, although I've done that, I still see TsLint nag about files[0] and result not present in their types. Have I specified incorrect type for the operations? What is the appropriate type in such case?

@Ja9ad335h I got that covering the first part - I declare a *target* variable that's on type *HTMLInputElement*. But the other thing I missed in the linked to answer. — Konrad Viltersten, Jan 31 '20 at 20:13

score 0 · Answer 1 · answered Jan 31 '20 at 17:42

0

target.files is only a property on an input event's target. The compiler does not know what type of event you are passing to it and there is no event of type input that you can give there as an object type. You either need to create one yourself or leave it as any. => https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement

answered Jan 31 '20 at 17:42

Ivan Mihaylov

434
2
9

How would I ensure that my type also contains all the stuff that a less specific *Event* already contains? – Konrad Viltersten Jan 31 '20 at 20:11

Event type for file upload from INPUT element

1 Answers1