Rate this docs

React Bootstrap File Input

React File Input - Bootstrap 4 & Material Design

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

            <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>
          

Material file input MDB Pro component

Material Design styling for Bootstrap File Input component

Choose file

            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

Choose files

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

      class InputPage extends Component {

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

      export default InputPage;
    

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


        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" ... />

API Reference: MDBInputFile Methods

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