How to upload image as file in React with TypeScript

Question

I'm trying to upload image as file but I'm not sure how to do it exactly.

Here is my input:

<input type="file" name="image" placeholder='Image' onChange={e => handleSetImage(e, i)}/>

Here is the error for "e":

Argument of type 'ChangeEvent' is not assignable to parameter of type 'FileList'. Type 'ChangeEvent' is missing the following properties from type 'FileList': length, item, [Symbol.iterator]ts(2345)

And here is my handler:

const [colorsAndImages, setColorsAndImages] = useState<[{image: object, color: string}]>([{image: {}, color: ''}])

...

    const handleSetImage = (event: FileList, index: number) => {
            const files = event;
            const list = [...colorsAndImages]
            list[index][image] = list
            console.log(list);
        };

Terry · Accepted Answer · 2022-01-30 14:13:28Z

1

That is because you have incorrectly typed your event argument in your handleSetImage. Based on how you're calling it, i.e.:

onChange={e => handleSetImage(e, i)}

You're actually passing ChangeEvent<HTMLInputElement> as e into your function. Therefore you need to update its typing accordingly:

const handleSetImage = (event: ChangeEvent<HTMLInputElement>, index: number) {
  const { files } = event.target;

  // Or if you don't prefer Object destructuring assignment...
  // const files = event.target.files;

  // Rest of the logic here
}

That requires you to import the typing for ChangeEvent from the react library, if your IDE fails to auto import it automatically:

import { ChangeEvent } from 'react';

edited Jan 30, 2022 at 14:13

answered Jan 30, 2022 at 14:11

Terry

66.7k16 gold badges107 silver badges127 bronze badges

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

9 Comments

Terry Over a year ago

@YoanIvanov You need to import the typing for ChangeEvent. Does your IDE not autosuggest its import from react?

Yoan Ivanov Over a year ago

Okay but I'm getting this in the console when I console.log event SyntheticBaseEvent {_reactName: 'onChange', _targetInst: null, type: 'change', nativeEvent: Event ....

Terry Over a year ago

Yes, that is expected. The event emitted from an event handler in React JSX is NOT the native event but more like a custom implementation of event (hence SyntheticBaseEvent. What are you trying to achieve here?

Yoan Ivanov Over a year ago

I mean it's not the image, like Filelist. The name of image, path of image ... So can I use it like that ?

Terry Over a year ago

When you log files as per my code, what do you see? Hint: you will see the FileList.

|

Collectives™ on Stack Overflow

How to upload image as file in React with TypeScript

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related