A drag and drop multiple file uploader component that uses Vue.js v2 and Axios. Uploader shows file names, sizes and total size of files added. It also allows setting a minimum required number of files to upload.
See live demo here.
Optional maxItems
prop added to allow setting a maximum number of files allowed per upload.
Default maxItems
is set to 30.
Optional method
prop allows PUT method to be used. Default method remains POST, if you want to use PUT just add method="put"
to your template.
Optional postMeta
prop added so you can include additional metadata that needs to be sent along. This prop can be in the form of a string, array or object and empty postMeta
data is not sent. To pass a string use :postMeta="'string'"
, to include an array you should use :postMeta="['value']"
and for an object use :postMeta="{name: 'value'}"
.
npm install --save vue2-multi-uploader
import MultipleFileUploader from 'vue2-multi-uploader'
export default {
...
components: {
MultipleFileUploader
},
...
}
Prop name | Type | Required | Default |
---|---|---|---|
postURL | String | yes | - |
successMessagePath | String | yes | - |
errorMessagePath | String | yes | - |
minItems | Number | no | 1 |
maxItems | Number | no | 30 |
method | String | no | POST |
postMeta | String, Array, Object | no | - |
Set your POST url in the postURL prop.
Set JSON success and error response messages to your custom JSON responses via props:
successMessagePath
,
errorMessagePath
Example template to use:
<multiple-file-uploader postURL="http://.." successMessagePath="" errorMessagePath=""></multiple-file-uploader>
Minimum items to upload (optional) You can modify the minimum number of files required for the upload to take place by changing the value of minItems prop. Default is set to 1. Here is an example template for uploading a minimum of 5 items and a maximum of 10 items:
<multiple-file-uploader postURL="http://.." successMessagePath="" errorMessagePath="" :minItems="5" :maxItems="10"></multiple-file-uploader>
Axios, ES6-Promise
CSS style is not scoped so it's easy for you to overwrite your own style. Bootstrap CSS is used in demo but not required for the component.
The MIT License (MIT)
Copyright (c) 2017 Andrei Barta @ UPDIVISION
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.