File

React Bootstrap 5 File component

File Input is a field which the user can use to upload one or more files (photos, documents or any other file type) from local storage.

Basic example

The file input is the most gnarly of the bunch and requires additional JavaScript if you’d like to hook them up with functional Choose file… and selected file name text. 

import React from 'react';
import { MDBFile } from 'mdb-react-ui-kit';

export default function App() {
  return (
    <div>
      <MDBFile label='Default file input example' id='customFile' />
    </div>
  );
}

Add the disabled prop to the <MDBFile> and the custom markup will be updated to appear disabled. 

import React from 'react';
import { MDBFile } from 'mdb-react-ui-kit';

export default function App() {
  return (
    <div>
      <MDBFile disabled label='Disabled file input example' id='formFileDisabled' />
    </div>
  );
}

Sizing

You may also choose from small and large file inputs to match our similarly sized text inputs. 

import React from 'react';
import { MDBFile } from 'mdb-react-ui-kit';

export default function App() {
  return (
    <div>
      <MDBFile label='Small file input example' size='sm' id='formFileSm' />
      <MDBFile label='Large file input example' size='lg' id='formFileLg' />
    </div>
  );
}

Multiple example

You can choose multiple files with one input as well. Just add the multiple prop to the <MDBFile> 

import React from 'react';
import { MDBFile } from 'mdb-react-ui-kit';

export default function App() {
  return (
    <div>
      <MDBFile label='Default file input example' id='formFileMultiple' multiple />
    </div>
  );
}

File - API

Import

import { MDBFile } from 'mdb-react-ui-kit';

Properties

MDBFile

Name Type Default Description Example
disabled Boolean false Makes the MDBFile disabled <MDBFile disabled />
inputRef String '' Reference to input element <MDBFile inputRef={reference} />
id String '' Defines an id for the MDBFile <MDBFile label="Example label" id="inputExample" />
label String '' Defines a label text for the MDBFile <MDBFile label="Example label" id="inputExample" />
labelId String '' Defines an id for the label <MDBFile label="Example label" labelId="exampleLabel" id="fileExample" />
labelClass String '' Adds custom classes to the label <MDBFile label="Example label" labelId="exampleLabel" labelClass="test-class" id="fileExample" />
labelStyle React.CSSProperties undefined Adds custom styles to the label <MDBFile labelStyle={customStyles} labelId="exampleLabel" labelClass="test-class" id="fileExample" />
name String '' Specifies the name for the MDBFile <MDBFile name="sampleName" label="Example label" id="inputExample" />
size String '' Set size of the MDBFile <MDBFile size="lg" />