This line const files = Array.from(e.target.files); produces an error in typescript.

I'm a newbie to typescript. It appears the object is not an array-like, but it actually is. What can I do to fix this?

The error is:

"No overload matches this call. Overload 1 of 4, '(iterable: Iterable | ArrayLike): File[]', gave the following error. Argument of type 'FileList | null' is not assignable to parameter of type 'Iterable | ArrayLike'. Type 'null' is not assignable to type 'Iterable | ArrayLike'. Overload 2 of 4, '(arrayLike: ArrayLike): File[]', gave the following error. Argument of type 'FileList | null' is not assignable to parameter of type 'ArrayLike'. Type 'null' is not assignable to type 'ArrayLike'."

Here's the code:

import { ChangeEvent } from 'react';
import './styles.css';

export function App() {
  const handleFileLoad = function (e: ChangeEvent<HTMLInputElement>) {
    const files = Array.from(e.target.files);
    // I want to use forEach here, so I attempt to convert it to an array.
  };

  return (
    <div>
      <input type="file" onChange={handleFileLoad} />
    </div>
  );
}

This line const files = Array.from(e.target.files); produces an error in typescript.

I'm a newbie to typescript. It appears the object is not an array-like, but it actually is. What can I do to fix this?

The error is:

"No overload matches this call. Overload 1 of 4, '(iterable: Iterable | ArrayLike): File[]', gave the following error. Argument of type 'FileList | null' is not assignable to parameter of type 'Iterable | ArrayLike'. Type 'null' is not assignable to type 'Iterable | ArrayLike'. Overload 2 of 4, '(arrayLike: ArrayLike): File[]', gave the following error. Argument of type 'FileList | null' is not assignable to parameter of type 'ArrayLike'. Type 'null' is not assignable to type 'ArrayLike'."

Here's the code:

import { ChangeEvent } from 'react';
import './styles.css';

export function App() {
  const handleFileLoad = function (e: ChangeEvent<HTMLInputElement>) {
    const files = Array.from(e.target.files);
    // I want to use forEach here, so I attempt to convert it to an array.
  };

  return (
    <div>
      <input type="file" onChange={handleFileLoad} />
    </div>
  );
}

• javascript
• arrays
• typescript
• file
• types

4 Answers 4

The reason why you're getting an error is because files in e.target.files might be null, which can cause Array.from(e.target.files) to error out, so TypeScript is sort of prompting you to provide a fall-back for that scenario.

I found the answer. This will do the job:

const files = Array.from(e.target.files as ArrayLike<File>);

We can consider FileList to be an ArrayLike that contains elements

For some reason, typescript didn't manage to guess it on its own.

you can use

(e.target as HTMLInputElement).files

instead of using

e.target

as an direct object

e.target.files returns a FileList | null, you can learn about FileList here.

You can see that you can iterate over the files with a regular for-loop:

for(let i = 0; i < files.length; i++) {
    const file = files[i]; // get single file from files array
    // do anything you want with the file
}