react bootstrap 5 file upload example

In this tutorial, we will see file upload input in react with bootstrap 5. We will see file input component, multiple file upload using react bootstrap 5.

Install & Setup Vite + React + Typescript + Bootstrap 5

React Bootstrap 5 File Upload Example

1. Create simple react bootstrap file upload input using react-bootstrap Form.Group, Form.Label, Form.Control component.

import Form from "react-bootstrap/Form";

export default function FormFileExample() {
  return (
    <Form.Group controlId="formFile" className="mb-3">
      <Form.Label>Default file input example</Form.Label>
      <Form.Control type="file" />
    </Form.Group>
  );
}

react bootstrap file upload

2. react bootstrap 5 disabled file upload.

import Form from "react-bootstrap/Form";

export default function FormFileExample() {
  return (
    <Form.Group controlId="formFileDisabled" className="mb-3">
      <Form.Label>Disabled file input example</Form.Label>
      <Form.Control type="file" disabled />
    </Form.Group>
  );
}

react bootstrap disabled file upload

3. react bootstrap 5 file upload size small and large.

import Form from "react-bootstrap/Form";

export default function FormFileExample() {
  return (
    <>
      <Form.Group controlId="formFileSm" className="mb-3">
        <Form.Label>Small file input example</Form.Label>
        <Form.Control type="file" size="sm" />
      </Form.Group>
      <Form.Group controlId="formFileLg" className="mb-3">
        <Form.Label>Large file input example</Form.Label>
        <Form.Control type="file" size="lg" />
      </Form.Group>
    </>
  );
}

react bootstrap size file upload

4.react bootstrap 5 multiple file upload.

import Form from "react-bootstrap/Form";

export default function FormFileExample() {
  return (
    <>
      <Form.Group controlId="formFileMultiple" className="mb-3">
        <Form.Label>Multiple files input example</Form.Label>
        <Form.Control type="file" multiple />
      </Form.Group>
    </>
  );
}

react bootstrap 5 multiple file upload