File

Vue Bootstrap 5 File

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

        
            
            <template>
              <MDBFile v-model="files1" label="Default file input example" />
            </template>
          
        
    
        
            
            <script>
              import { MDBFile } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              export default {
                components: {
                  MDBFile
                },
                setup() {
                  const files1 = ref([]);

                  return {
                    files1
                  };
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBFile } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              const files1 = ref([]);
            </script>

Add the disabled attribute to the component and the custom markup will be updated to appear disabled. 

        
            
            <template>
              <MDBFile disabled label="Disabled file input example" />
            </template>
          
        
    
        
            
            <script>
              import { MDBFile } from "mdb-vue-ui-kit";

              export default {
                components: {
                  MDBFile
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBFile } from "mdb-vue-ui-kit";
            </script>

Sizing

You may also choose from small and large file inputs to match our similarly sized text inputs. 

        
            
            <template>
              <MDBFile
                size="sm"
                label="Small file input example"
                class="mb-2"
              />
              <MDBFile size="lg" label="Large file input example" />
            </template>
          
        
    
        
            
            <script>
              import { MDBFile } from "mdb-vue-ui-kit";

              export default {
                components: {
                  MDBFile
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBFile } from "mdb-vue-ui-kit";
            </script>

Multiple

Add the multiple attribute to the component to enable uploading more than one file. 

        
            
            <template>
              <MDBFile
                v-model="files2"
                multiple
                label="Multiple file input example"
              />
            </template>
          
        
    
        
            
            <script>
              import { MDBFile } from "mdb-vue-ui-kit";
              import { ref } from "vue";
              
              export default {
                components: {
                  MDBFile
                },
                setup() {
                  const files2 = ref([]);

                  return {
                    files2
                  };
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBFile } from "mdb-vue-ui-kit";
              import { ref } from "vue";

              const files2 = ref([]);
            </script>

File - API

Import

        
            
          <script>
            import {
              MDBFile
            } from 'mdb-vue-ui-kit';
          </script>

Properties

Property Type Default Description
id String random unique id Changes input id
inputClass String "" Adds new input classes
invalidFeedback String "" Sets invalid feedback
isValid Boolean false Sets input as valid or invalid
isValidated Boolean false Marks input as validated
label String "" Defines label text
labelClass String "" Adds new label classes
v-model [FileList, Array] [] Changes input value with two-way data binding
size String "" Changes input size. Available options are: sm or lg.
tooltipFeedback Boolean false Enables tooltip feedback
validFeedback String "" Sets valid feedback
validateOnChange Boolean false Enables validation on change