how to get the file data from a react-bootstrap formcontrol component

Question

I'm using a form control component to pass an image to an API endpoint via an AJAX call. So far, I'm unable to find information on how to actually target the actual file data.

Brandon · Accepted Answer · 2016-11-09 06:28:55Z

12

You can get the file via onChange:

<FormControl type="file" onChange={(e) => console.log(e.target.files)}/>

where e.target.files is a FileList containing 0 or 1 files.

answered Nov 9, 2016 at 6:28

Brandon

1361 silver badge2 bronze badges

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

Comments

Badr B · Accepted Answer · 2022-11-04 01:51:56Z

1

I'm using TypeScript, and I kept getting the error Property 'files' does not exist on type 'EventTarget & FormControlElement'. Including the following types solved the issue:

const [thumbnail, setThumbnail] = useState<FileList | null>(null);
...
<Form.Control type="file" onChange={(e: React.ChangeEvent<HTMLInputElement>) => setThumbnail(e.target.files)} />

answered Nov 4, 2022 at 1:51

Badr B

1,4441 gold badge15 silver badges20 bronze badges

Collectives™ on Stack Overflow

how to get the file data from a react-bootstrap formcontrol component

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related