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

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

CodePudding user response：

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.

CodePudding user response：

you can use

(e.target as HTMLInputElement).files

instead of using

e.target

as an direct object

CodePudding user response：

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
}

CodePudding user response：

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.