vue-easy-multi-file-upload
vue-easy-multi-file-uploader
File uploading made easy for vueJs. Custom validators, custom styling, file preview support for image & videos...
Please use the latest version.
How to use
1. Install package via npm
npm i vue-easy-multi-file-upload --save
2. Import & use
<template>
<div id="app">
<VueEasyMultiFileUpload :config="config" v-model="values" />
{{values}}
</div>
</template>
<script>
import VueEasyMultiFileUpload from "vue-easy-multi-file-upload";
export default {
components: { VueEasyMultiFileUpload },
data() {
return {
config: {
id: "multi-file-uploader",
label: "Upload your files",
maxFiles: 6,
uploadUrl: "...",
deleteUrl: "...",
uploadHttpMethod: "POST",
deleteHttpMethod: "DELETE",
uploadFieldName: "file",
deleteFieldName: "filePath",
Authorization: "Bearer ...",
style: {
width: "90px",
height: "75px",
},
allowExt: ["jpg", "png", "gif", "mp4", "txt", "webm", "pdf"],
maxSize: 5,
delimiter: "|",
customValidator: (file) => {
// ... custom validation logic ...
return {
status: true, // or false
message: "It passes validation" // or null
}
// Tip: function can be async, can also return promise
}
},
values: null
};
},
};
</script>
Props
There is only one prop i.e. config. Fields marked with asterisk(*) are required.
Name | Description | Default Value |
---|---|---|
*uploadUrl* | URL to upload file. Specified request is sent as FormData. | |
uploadHttpMethod* | HTTP method for uploadUrl. Generally it's either POST or PUT. | POST |
uploadFieldName* | Name of key for FormData that holds file. | file |
deleteUrl | URL to delete file. Specified request is sent to this url with application/json ContentType & uploaded file's path. |
|
deleteHttpMethod | HTTP method for deleteUrl. Generally its DELETE, can also be POST or PUT. | DELETE |
deleteFieldName | fieldName containing file path to delete. | filePath |
Authorization | Authorization header. eg: Beaker token | |
allowExt* | File extensions to allow. Used for validating file before upload. | ["jpg", "png", "gif", "mp4", "txt", "pdf"] |
maxSize | Max size of file in Mb. | |
maxFiles | Maximum number of files to upload | |
label | Text to show at initial state. Also supports HTML. | Upload a file |
uploadingMessage | Text to show at uploading state. Also supports HTML. | Loading... |
style | Custom style for file upload section. Accepts style in plain string or object | |
delimiter | If delimiter is specified, a single string containing file paths seperated by delimeter is returned. eg: pipes, comma | |
id | Id of parent element | multi-file-uploader |
customValidator | Custom validation for uploaded file before sending it to server. View example above. | |
compress | Compress images. Uses compressorjs | false |
compressorOptions | Compressorjs options. View compressorjs for more details | null |
Events
Name | Description |
---|---|
@input | Fired when new file is uploaded or existing file is deleted |
Dependencies
Dependencies
@babel/core: ^7.14.6@babel/preset-env: ^7.14.5@rollup/plugin-alias: ^3.1.1@rollup/plugin-babel: ^5.2.2@rollup/plugin-commonjs: ^17.0.0@rollup/plugin-node-resolve: ^13.0.0@rollup/plugin-replace: ^2.4.2@vue/cli-plugin-babel: ^4.5.10@vue/cli-service: ^4.5.10cross-env: ^7.0.3minimist: ^1.2.5rollup: ^2.52.1rollup-plugin-node-builtins: ^2.1.2rollup-plugin-node-globals: ^1.4.0rollup-plugin-terser: ^7.0.2rollup-plugin-vue: ^5.1.9vue: ^2.6.14vue-template-compiler: ^2.6.14vuepress: ^1.8.2