Vue Drag and drop file upload

Vue Bootstrap drag and drop file upload plugin

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

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

Basic example

The MDB Vue File Upload component resambles a regular input with some extra features. It means it best operated the Vue-way, namely - through imitation of v-model, files prop and @change event handler. The extras include automatic browser feature detection and in case the support is not there, falling back to default, "click here to upload" file upload.

        
            
          <template>
            <mdb-file-upload :files="files" @change="handleChange" />
          </template>
          
        
    
        
            
          <script>
            import mdbFileUpload from 'mdb-file-upload';
            export default {
              name: 'app',
              components: {
                mdbFileUpload
              },
              data() {
                return {
                  files: []
                }
              },
              methods: {
                handleChange(v) {
                  this.files = v;
                }
              }
            }
          </script>

Custom height

You can set the height

        
            
          <template>
            <mdb-file-upload height="500" />
          </template>
          
        
    
        
            
          <script>
            import mdbFileUpload from 'mdb-file-upload';
            export default {
              name: 'app',
              components: {
                mdbFileUpload
              }
            }
          </script>

Disable

You can disabled the input

        
            
          <template>
            <mdb-file-upload disabled />
          </template>
          
        
    
        
            
          <script>
            import mdbFileUpload from 'mdb-file-upload';
            export default {
              name: 'app',
              components: {
                mdbFileUpload
              }
            }
          </script>

Max size

You can add a max file size in kb, mb and gb using maxSize prop.

        
            
          <template>
            <mdb-file-upload maxSize="2M" />
          </template>
          
        
    
        
            
          <script>
            import mdbFileUpload from 'mdb-file-upload';
            export default {
              name: 'app',
              components: {
                mdbFileUpload
              }
            }
          </script>

Vue Drag and Drop File Upload - getting started: download & setup

Download

This plugin requires a purchase.

Buy Drag and drop file upload plugin

API Reference: Properties

Name Type Default Description Example
files Array [] The uploaded files <mdb-file-upload :files="theFiles"/>
multiple Boolean false Determines whether the input should accept multiple files <mdb-file-upload multiple/>
height Number / String 200 File upload's desired height in pixels <mdb-file-upload :height="300"/>
disabled Boolean false Makes the file input turn disabled <mdb-file-upload disabled/>
accept String Specify the kind of files the input should accept <mdb-file-upload accept="image/png, image/jpeg"/>
maxSize String Delimit file size to be accepted in KB(k), MB(m) or GB(g) <mdb-file-upload maxSize="2M"/>
text Object { able: { multi: 'Drag and drop files here or click', single: 'Drag and drop a file here or click', }, unable: { multi: 'Click here to upload files', single: 'Click here to upload a file' } This is the text object - it describes the primary message being displayed when there are no files present <mdb-file-upload :text="inputFileMessagePL"/>
secondaryText Object { able: { multi: 'Drag and drop or click to add files', single: 'Drag and drop or click to replace file', }, unable: { multi: 'Click here to add files', single: 'Click here to replace file' } } It has the same structure as text, but describes the text that is shown when there is a file in <mdb-file-upload :secondaryText="thanksForUploading-PL"/>
btnText String "remove" The string inside the remove button that's in previews' top-right corner. <mdb-file-upload :btnText="Sashay away"/>
generalErrorText String "Ooops, something wrong happended." This message will appear in the background once something bad happens <mdb-file-upload :generalErrorText="OMG LOL"/>
fileTooBigText String "The file size is too big." The uploaded file is too big error message. <mdb-file-upload :fileTooBigText="Please upload a file of 2mb or less."/>