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 className='file-container'>
                  <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 className='file-container'>
                  <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 className='file-container'>
                  <MDBFile label='Small file input example' size='sm' id='formFileSm' />
                  <MDBFile label='Large file input example' size='lg' id='formFileLg' />
                </div>
              );
            }

File - API

Import

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

Properties

MDBFile

Name Type Default Description Example
className String '' Add custom class to MDBFile <MDBFile className="class" />
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" />
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" />