File upload

Vue Bootstrap 5 File upload plugin

MD Bootstrap's File Upload plugin is an extension that allows you to upload files by using drag and drop functionality. Easy to use, setup and customize.

File upload plugin built with the latest Bootstrap 5. Many customization options like custom height, max size, confirmation message, and much more.

Note: Read the API tab to find all available options and advanced customization

Basic example

        
            
            <template>
              <MDBFileUpload />
            </template>
          
        
    
        
            
            <script>
              import { MDBFileUpload } from "mdb-vue-file-upload";
              export default {
                components: {
                  MDBFileUpload
                },
              };
            </script>

Default message example

By adding defaultMsg prop you can set main message of the file upload. 

        
            
            <template>
              <MDBFileUpload defaultMsg="custom message" />
            </template>
          
        
    
        
            
            <script>
              import { MDBFileUpload } from "mdb-vue-file-upload";
              export default {
                components: {
                  MDBFileUpload
                },
              };
            </script>

Custom height example

By adding height prop you can set its custom height.

        
            
            <template>
              <MDBFileUpload :height="500" />
            </template>
          
        
    
        
            
            <script>
              import { MDBFileUpload } from "mdb-vue-file-upload";
              export default {
                components: {
                  MDBFileUpload
                },
              };
            </script>

Max size

By adding maxFileSize prop you can set max size of a file.

        
            
            <template>
              <MDBFileUpload :maxFileSize="2" />
            </template>
          
        
    
        
            
            <script>
              import { MDBFileUpload } from "mdb-vue-file-upload";
              export default {
                components: {
                  MDBFileUpload
                },
              };
            </script>

Default value

By adding defaultFiles prop you can set default files array in the file upload element. 

        
            
            <template>
              <MDBFileUpload
                :defaultFiles="[
                  'https://mdbootstrap.com/img/Photos/Others/images/89.jpg',
                ]"
              />
            </template>
          
        
    
        
            
            <script>
              import { MDBFileUpload } from "mdb-vue-file-upload";
              export default {
                components: {
                  MDBFileUpload
                },
              };
            </script>

Disable

By adding disabled prop you can disable the component.

        
            
            <template>
              <MDBFileUpload disabled />
            </template>
          
        
    
        
            
            <script>
              import { MDBFileUpload } from "mdb-vue-file-upload";
              export default {
                components: {
                  MDBFileUpload
                },
              };
            </script>

Accept formats

By adding accept prop you can set allowed file types.

        
            
            <template>
              <MDBFileUpload accept="image/*, .pdf" />
            </template>
          
        
    
        
            
            <script>
              import { MDBFileUpload } from "mdb-vue-file-upload";
              export default {
                components: {
                  MDBFileUpload
                },
              };
            </script>

Disabled remove button

By adding disabledRemoveBtn prop you can remove "Remove button". 

        
            
            <template>
              <MDBFileUpload disabledRemoveBtn />
            </template>
          
        
    
        
            
            <script>
              import { MDBFileUpload } from "mdb-vue-file-upload";
              export default {
                components: {
                  MDBFileUpload
                },
              };
            </script>

Multiple files

By adding multiple prop you can allow to upload more than single file. 

        
            
            <template>
              <MDBFileUpload multiple />
            </template>
          
        
    
        
            
            <script>
              import { MDBFileUpload } from "mdb-vue-file-upload";
              export default {
                components: {
                  MDBFileUpload
                },
              };
            </script>

Multiple with files limit

By adding maxFilesQuantity prop you can set limit of uploaded files. 

        
            
            <template>
              <MDBFileUpload multiple :maxFilesQuantity="3" />
            </template>
          
        
    
        
            
            <script>
              import { MDBFileUpload } from "mdb-vue-file-upload";
              export default {
                components: {
                  MDBFileUpload
                },
              };
            </script>

File upload - API

Import

        
            
          <script>
            import { MDBFileUpload } from "mdb-vue-file-upload";
          </script>

Properties

Name Type Default Description
accept String '*' Allows you to set specific file formats
defaultFiles Array [] Allows you set default files
defaultMsg String 'Drag and drop a file here or click' Changes text of default message
disabled Boolean false Makes drag and drop disabled
disabledRemoveBtn Boolean false Allows you to disabled remove button
height Number Changes height of dropzone
mainError String 'Ooops, something wrong happended.' Changes text of main error message
maxFilesQuantity Number Infinity Allows you to upload specific number of files
maxFileSize Number Changes allowed file max size
maxSizeError String 'Your file is too big (Max size ~~~)' Changes text of size's error (add '~~~' to show value of max size)
multiple Boolean false Allows you to upload more than single file
previewMsg String 'Drag and drop or click to replace' Changes text of file's preview
removeBtn String 'Remove' Changes text of remove button

Methods

Name Description
clear Clears an input and file list

Events

Name Description
change This event fires immediately after any change. It returns a file list.
clear This event fires immediately after file upload plugin was cleared.
error This event fires immediately when you upload a file with a wrong size.
remove This event fires immediately when a file has been remove from file upload component. It returns a file list.

For example, to listen on file change add an event

        
            
          <template>
            <MDBFileUpload @change="handleChange" />
          </template>