react-bootstrap Form.File specify multiple allowed files formats

Question

I want to restrict users to only upload images of certain formats. For this, I want to pass multiple file types in the accept prop of Form.File. I can only find examples with one file type only. Below is my code so far:

<InputGroup >
    <Form.Group>
        <Form.File 
         onChange={(e) => setGamePhoto(e.target.files[0])}
         label="Upload The End-Game Photo"
         accept=".png"
        />
   </Form.Group>
</InputGroup>

I want to pass multiple file types like png, jpg, jpeg, web etc

Osama Bin Saleem · Accepted Answer · 2021-07-01 10:32:50Z

2

You can insert it in the form of a comma , separated list. Try this:

<InputGroup >
    <Form.Group>
        <Form.File 
         onChange={(e) => setGamePhoto(e.target.files[0])}
         label="Upload The End-Game Photo"
         accept=".png,.jpg,.jpeg,.webp"
        />
   </Form.Group>
</InputGroup>

answered Jul 1, 2021 at 10:32

Osama Bin Saleem

9091 gold badge13 silver badges26 bronze badges

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

Collectives™ on Stack Overflow

react-bootstrap Form.File specify multiple allowed files formats

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related