Rate these docs

Vue Bootstrap File Input

Vue File Input - Bootstrap 4 & Material Design

Vue 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


            <div class="input-group">
              <div class="input-group-prepend">
                <span class="input-group-text" id="inputGroupFileAddon01">Upload</span>
              <div class="custom-file">
                <input type="file" class="custom-file-input" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01">
                <label class="custom-file-label" for="inputGroupFile01">Choose file</label>


Material file input MDB Pro component

Material Design styling for Bootstrap File Input component

Choose file

            <mdb-file-input btnColor="primary" />


Multiple files input MDB Pro component

Choose files

        <mdb-file-input multiple btnColor="primary"/>


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 'mdbvue';

API Reference: Properties

Name Type Default Description Example
btnColor String default Specifies button's color. <mdb-file-input btnColor="primary" ... />
btnTitle String Choose file Specifies button's title. <mdb-file-input btnTitle="Choose Your file" ... />
multiple Boolean false Uploading multiple files. <mdb-file-input multiple ... />
textFieldTitle String Upload your file Specifies input's placeholder. <mdb-file-input textFieldTitle="Upload your files" ... />

API Reference: Methods

Name Parameters Description Example
v-on:getValue value Returns input value. Use this method instead of v-model to handle input value changes. <mdb-file-input @getValue="getFileInputValue" />