Cannot convert FileList to Array using Array.from and spread syntax in typescript

Question

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

Michael Colesnic · Accepted Answer · 2022-04-08 15:36:32Z

12

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.

answered Apr 8, 2022 at 15:36

Michael Colesnic

3731 gold badge3 silver badges10 bronze badges

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

1 Comment

twentysixhugs Over a year ago

That solves the problem as well, thank you. const files = Array.from(e.target.files || []);

twentysixhugs · Accepted Answer · 2022-04-08 15:00:10Z

3

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.

answered Apr 8, 2022 at 15:00

twentysixhugs

5841 gold badge6 silver badges13 bronze badges

Comments

keerti shekhar · Accepted Answer · 2022-04-08 14:23:15Z

0

you can use

(e.target as HTMLInputElement).files

instead of using

e.target

as an direct object

answered Apr 8, 2022 at 14:23

keerti shekhar

1

Comments

Yitzhak Barzilay · Accepted Answer · 2022-04-08 14:33:29Z

0

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
}

answered Apr 8, 2022 at 14:33

Yitzhak Barzilay

714 bronze badges

1 Comment

twentysixhugs Over a year ago

Of course, I can use a regular for loop. But in regular javascript, my code was totally valid (without typescript syntax, of course). So, I didn't know what typescript was not able to accept what I had written. I've posted a possible solution.

Collectives™ on Stack Overflow

Cannot convert FileList to Array using Array.from and spread syntax in typescript

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related