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