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

Upload 

            <template>
              <div class="input-group">
                <div class="input-group-prepend">
                  <span class="input-group-text" id="inputGroupFileAddon01">Upload</span>
                </div>
                <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>
                </div>
              </div>
            </template>

Material file input MDB Pro component

Material Design styling for Bootstrap File Input component

Choose file 

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

            <script>
              import { mdbFileInput } from 'mdbvue';
              export default {
                name: "FileInput",
                componens: {
                  mdbFileInput
                }
              }
            </script>

Multiple files input MDB Pro component

Choose files 

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

        <script>
          import { mdbFileInput } from 'mdbvue';
          export default {
            name: "FileInput",
            componens: {
              mdbFileInput
            }
          }
        </script>

File inputs with photo placeholder MDB Pro component

Add img property to mdb-file-input to display photo placeholder and control a its apperance with circle and width properties

example placeholder
Choose file
example placeholder avatar
Add photo 

       <template>
        <mdb-container>
          <mdb-row>
            <mdb-col md="4">
              <mdb-file-input @getValue="getFileInputValue" circle btnColor="mdb-color" btn-title="ADD PHOTO" rounded img="https://mdbootstrap.com/img/Photos/Others/placeholder-avatar.jpg" />
            </mdb-col>
            <mdb-col md="4">
              <mdb-file-input @getValue="getFileInputValue" :width="300" btnColor="mdb-color" rounded btn-title="ADD PHOTO" img="https://mdbootstrap.com/img/Photos/Others/placeholder.jpg" />
            </mdb-col>
          </mdb-row>
        </mdb-container>
       </template>
      

        <script>
          import { mdbCol, mdbFileInput, mdbContainer, mdbRow } from "mdbvue";
          export default {
            name: "FileInputPage",
            components: {
              mdbCol,
              mdbFileInput,
              mdbContainer,
              mdbRow
            },
            data() {
              return {
                test: 'Test value'
              };
            },
            methods: {
              getFileInputValue (val) {
                console.log(val);
              }
            }
          };
        </script>

File inputs with gradient floating buttons MDB Pro component 


        <template>
          <mdb-row>
            <mdb-col sm="12" md="4">
              <mdb-file-input @getValue="getFileInputValue" floating icon="paperclip" gradient="peach" />
            </mdb-col>
            <mdb-col sm="12" md="4">
              <mdb-file-input @getValue="getFileInputValue" floating icon="heart" gradient="blue" />
            </mdb-col>
            <mdb-col>
              <mdb-file-input @getValue="getFileInputValue" floating icon="cloud-upload-alt" gradient="purple" />
            </mdb-col>
          </mdb-row>
        </template>
      

        <script>
          import { mdbCol, mdbFileInput, mdbRow } from "mdbvue";
          export default {
            name: "FileInputPage",
            components: {
              mdbCol,
              mdbFileInput,
              mdbRow
            },
            data() {
              return {
                test: 'Test value'
              };
            },
            methods: {
              getFileInputValue (val) {
                console.log(val);
              }
            }
          };
        </script>

File inputs with large floating buttons MDB Pro component 


        <template>
          <mdb-row>
            <mdb-col sm="12" md="4">
              <mdb-file-input @getValue="getFileInputValue" floating lg icon="paperclip" btnColor="pink" />
            </mdb-col>
            <mdb-col sm="12" md="4">
              <mdb-file-input @getValue="getFileInputValue" floating lg icon="heart" btnColor="cyan" />
            </mdb-col>
            <mdb-col>
              <mdb-file-input @getValue="getFileInputValue" floating lg icon="cloud-upload-alt" btnColor="amber" />
            </mdb-col>
          </mdb-row>
        </template>
      

        <script>
          import { mdbCol, mdbFileInput, mdbRow } from "mdbvue";
          export default {
            name: "FileInputPage",
            components: {
              mdbCol,
              mdbFileInput,
              mdbRow
            },
            data() {
              return {
                test: 'Test value'
              };
            },
            methods: {
              getFileInputValue (val) {
                console.log(val);
              }
            }
          };
        </script>

File inputs with rounded gradient buttons MDB Pro component

Choose file
Choose file
Choose file 

        <template>
          <mdb-container>
            <mdb-file-input @getValue="getFileInputValue" sm rounded gradient="purple" />
            <mdb-file-input @getValue="getFileInputValue" rounded gradient="aqua" />
            <mdb-file-input @getValue="getFileInputValue" rounded lg gradient="peach" />
          </mdb-container>
        </template>
      

        <script>
          import { mdbFileInput, mdbContainer } from "mdbvue";

          export default {
            name: "FileInputPage",
            components: {
              mdbFileInput,
              mdbContainer
            },
            data() {
              return {
                test: 'Test value'
              };
            },
            methods: {
              getFileInputValue (val) {
                console.log(val);
              }
            }
          };
        </script>

File inputs with rounded outline buttons MDB Pro component

Choose file
Choose file
Choose file 

        <template>
          <mdb-container>
            <mdb-file-input @getValue="getFileInputValue" rounded sm outline="success" />
            <mdb-file-input @getValue="getFileInputValue" rounded outline="secondary" />
            <mdb-file-input @getValue="getFileInputValue" rounded lg outline="warning" />
          </mdb-container>
        </template>
      

        <script>
          import { mdbFileInput, mdbContainer } from "mdbvue";

          export default {
            name: "FileInputPage",
            components: {
              mdbFileInput,
              mdbContainer
            },
            data() {
              return {
                test: 'Test value'
              };
            },
            methods: {
              getFileInputValue (val) {
                console.log(val);
              }
            }
          };
        </script>

File inputs with colorful buttons MDB Pro component

Choose files
Choose files
Choose files 

        <template>
          <mdb-container>
              <mdb-file-input @getValue="getFileInputValue" sm btnColor="unique" />
              <mdb-file-input @getValue="getFileInputValue" btnColor="light-blue" />
              <mdb-file-input @getValue="getFileInputValue" lg btnColor="primary" />
          </mdb-container>
        </template>
      

        <script>
          import { mdbFileInput, mdbContainer } from "mdbvue";

          export default {
            name: "FileInputPage",
            components: {
              mdbFileInput,
              mdbContainer
            },
            data() {
              return {
                test: 'Test value'
              };
            },
            methods: {
              getFileInputValue (val) {
                console.log(val);
              }
            }
          };
        </script>

File inputs with outline buttons MDB Pro component

Choose files
Choose files
Choose files 

        <template>
          <mdb-container>
            <mdb-file-input @getValue="getFileInputValue" sm outline="info" />
            <mdb-file-input @getValue="getFileInputValue" outline="default" />
            <mdb-file-input @getValue="getFileInputValue" lg outline="danger" />
          </mdb-container>
        </template>
      

        <script>
          import { mdbFileInput, mdbContainer } from "mdbvue";

          export default {
            name: "FileInputPage",
            components: {
              mdbFileInput,
              mdbContainer
            },
            data() {
              return {
                test: 'Test value'
              };
            },
            methods: {
              getFileInputValue (val) {
                console.log(val);
              }
            }
          };
        </script>

File inputs with buttons with icons MDB Pro component

Choose files
Choose file
Choose files
Choose file 

        <template>
          <mdb-row>
            <mdb-col sm="12" md="6">
              <mdb-file-input @getValue="getFileInputValue" icon="cloud-upload-alt" sm gradient="blue" />
              <mdb-file-input @getValue="getFileInputValue" icon="cloud-upload-alt" icon-right sm rounded btnColor="pink" />
            </mdb-col>
            <mdb-col>
              <mdb-file-input @getValue="getFileInputValue" icon="cloud-upload-alt" outline="info" />
              <mdb-file-input @getValue="getFileInputValue" icon="upload" icon-right rounded lg outline="danger" />
            </mdb-col>
          </mdb-row>
        </template>
      

        <script>
          import { mdbFileInput, mdbCol, mdbRow } from "mdbvue";

          export default {
            name: "FileInputPage",
            components: {
              mdbFileInput,
              mdbCol,
              mdbRow
            },
            data() {
              return {
                test: 'Test value'
              };
            },
            methods: {
              getFileInputValue (val) {
                console.log(val);
              }
            }
          };
        </script>

File inputs within cards MDB Pro component

Choose file
Choose files 

            <template>
              <mdb-row>
                <mdb-col sm="12" md="6">
                  <mdb-card class="indigo py-4 px-5 z-depth-2">
                    <mdb-file-input @getValue="getFileInputValue" icon="cloud-upload-alt" sm outline="white" />
                    <mdb-file-input @getValue="getFileInputValue" icon="cloud-upload-alt" sm rounded text-field-title="Upload one more" outline="white" />            
                  </mdb-card>
                </mdb-col>
                <mdb-col sm="12" md="6">
                  <mdb-card class="mdb-color lighten-4 py-4 px-5 z-depth-2">
                    <mdb-file-input @getValue="getFileInputValue" floating text-white icon="paperclip" gradient="peach" />
                    <mdb-file-input @getValue="getFileInputValue" floating text-white icon="paperclip" gradient="peach" />
                    <mdb-file-input @getValue="getFileInputValue" floating text-white icon="paperclip" gradient="peach" />
                  </mdb-card>
                </mdb-col>
              </mdb-row>
            </template>
          

            <script>
              import { mdbCol, mdbFileInput, mdbRow, mdbCard } from "mdbvue";
    
              export default {
                name: "FileInputPage",
                components: {
                  mdbCol,
                  mdbFileInput,
                  mdbRow,
                  mdbCard
                },
                data() {
                  return {
                    test: 'Test value'
                  };
                },
                methods: {
                  getFileInputValue (val) {
                    console.log(val);
                  },
                  resetFileInput() {
                    this.$refs.fileInput.reset();
                  }
                }
              };
            </script>

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" ... />
rounded Boolean false Changes button's style to rounded. <mdb-file-input rounded />
sm Boolean false Sets button's size to small. <mdb-file-input sm />
lg Boolean false Sets button's size to large. <mdb-file-input lg />
outline Boolean false Sets button's style to outline. <mdb-file-input outline />
floating Boolean false Sets button's style to floating. <mdb-file-input floating />
gradient String Sets button's background to gradient. <mdb-file-input gradient="peach" />
icon String Displays an icon on the left. <mdb-file-input icon="upload" />
iconRight String Displays an icon on the right. <mdb-file-input icon-right="upload" />
img Boolean Changes file input's display to image placeholder <mdb-file-input img />
src String "https://mdbootstrap.com/img/Photos/Others/placeholder.jpg" Sets source of image placeholder <mdb-file-input img src="https://mdbootstrap.com/img/Photos/Others/placeholder.jpg" />
circle Boolean false Changes an image placeholder's style to circle. A source image should have ratio 1:1 to avoid distortion. <mdb-file-input img circle />
width Number 150 Sets width of an image placeholder (in pixels). <mdb-file-input img :width="130" />

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