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

Drag and drop a file here or click

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

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

    Default message example

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

    custom message

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

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

      Custom height example

      By adding height prop you can set its custom height.

      Drag and drop a file here or click

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

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

        Max size

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

        Drag and drop a file here or click

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

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

          Default value

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

          Drag and drop a file here or click

            89.jpg

            Drag and drop or click to replace

            <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>
            <script setup lang="ts">
  import { MDBFileUpload } from "mdb-vue-file-upload";
</script>

            Disable

            By adding disabled prop you can disable the component.

            Drag and drop a file here or click

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

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

              Accept formats

              By adding accept prop you can set allowed file types.

              Drag and drop a file here or click

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

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

                Disabled remove button

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

                Drag and drop a file here or click

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

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

                  Multiple files

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

                  Drag and drop a file here or click

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

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

                    Multiple with files limit

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

                    Drag and drop a file here or click

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

  export default {
    components: {
      MDBFileUpload
    },
  };
</script>
                      <script setup lang="ts">
  import { MDBFileUpload } from "mdb-vue-file-upload";
</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 
                      <template>
  <MDBBtn color="primary" @click="fileRef?.clear()">Clear input</MDBBtn>
  <MDBFileUpload ref="fileRef" />
</template>
                      <script>
  import { MDBFileUpload } from "mdb-vue-file-upload";
  import { MDBBtn } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  export default {
    components: {
      MDBFileUpload,
      MDBBtn,
    },
    setup() {
      const fileRef = ref(null);
      return {
        fileRef,
      };
    },
  };
</script>
                      <script setup lang="ts">
  import { MDBFileUpload } from "mdb-vue-file-upload";
  import { MDBBtn } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  const fileRef = ref<InstanceType<typeof MDBFileUpload> | null>(null);
</script>

                      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>