React Bootstrap File Input

React File Input - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

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

Standard file inputs usually leave a lot to wish for in terms of design, but MDB takes care of that by enhancing them with Material Design best practices.

Most common use examples:

CSV upload to CRM system
Avatar picture upload
Simple GIF upload

Below you can see a number of Bootstrap file inputs created with Material Design for Bootstrap.

Default file input

Default styling for Bootstrap File Input component

Upload

Choose file

Show code

        
              
            import React, { Component } from "react";

            class InputPage extends Component {

              render() {
                return (
                  <div className="input-group">
                    <div className="input-group-prepend">
                      <span className="input-group-text" id="inputGroupFileAddon01">
                        Upload
                      </span>
                    </div>
                    <div className="custom-file">
                      <input
                        type="file"
                        className="custom-file-input"
                        id="inputGroupFile01"
                        aria-describedby="inputGroupFileAddon01"
                      />
                      <label className="custom-file-label" htmlFor="inputGroupFile01">
                        Choose file
                      </label>
                    </div>
                  </div>
                );
              }
            }

            export default InputPage;

Material file input MDB Pro component

Material Design styling for Bootstrap File Input component

Show code

        
              
            import React, { Component } from "react";
            import { MDBFileInput } from "mdbreact";

            class InputPage extends Component {

              render() {
                return (
                  <MDBFileInput />
                );
              }
            }

            export default InputPage;

Multiple files input MDB Pro component

Show code

        
              
          import React, { Component } from "react";
          import { MDBFileInput } from "mdbreact";

          class InputPage extends Component {

          render() {
            return (
                <MDBFileInput multiple btnColor="info" />
              );
            }
          }

          export default InputPage;

Introduction
Multiple files inputs

React File Input - API

In this section you will find advanced information about the File Input component. You will learn which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use to work with it.

Import statement

Show code

javascript

        
            
          import { MDBFileInput } from "mdbreact";

API Reference: MDBInputFile Properties

Name	Type	Default	Description	Example
`btnColor`	String	`primary`	Specifies button's color.	`<MDBInputFile btnColor="default" ... />`
`btnTitle`	String	`Choose file`	Specifies button's title.	`<MDBInputFile btnTitle="Choose file" ... />`
`className`	String		Adds custom classes	`<MDBInputFile className="myClass" ... />`
`multiple`	Boolean	`false`	Allows to upload multiple files.	`<MDBInputFile multiple ... />`
`textFieldTitle`	String	`Upload your file`	Specifies input's placeholder.	`<MDBInputFile textFieldTitle="Your custom text goes here" ... />`
`reset`	Boolean	`false`	Adds a reset button.	`<MDBInputFile reset />`
`resetClassName`	String		Adds custom class to the reset button.	`<MDBInputFile resetClassName="myClass" />`
`resetAriaLabel`	String		Defines a string that labels the reset button element.	`<MDBInputFile resetAriaLabel="Dismiss" />`
`reverse`	Boolean	`false`	Lets the button to switch places with input	`<MDBInputFile reverse ... />`

API Reference: MDBInputFile Methods

Name	Parameters	Description	Example
`getValue`	value	Returns input value, on onChange event.	`<MDBInputFile getValue={this.fileInputHandler} />`