A super simple unstyled file upload component in Vue.js
- Vue.js (tested with 2.6.11).
npm install --save m24-vue-upload-file
import Vue from 'vue'
import FileUpload from 'm24-vue-upload-file'
new Vue({
el: '#app',
data: {
upload: {
acceptTypes: 'image/*',
multiple: false
},
files: [],
},
components: {
FileUpload
},
methods: {
filesAdded (fileArray) {
this.files = fileArray
},
fileRemoved (fileArray) {
this.files = fileArray
},
...
// Example of a file submit
submitFiles (files) {
const formData = new FormData()
for (var i = 0; i < this.files.length; i++) {
const file = this.files[i]
formData.append('files[' + i + ']', file)
}
axios.post(this.submitEndpoint, formData, { headers: { 'Content-Type': 'multipart/form-data' } })
.then(response => {
// Upload
})
.catch(errors => {
// Upload failes
})
},
}
})<body id="app">
<file-upload :acceptTypes="upload.acceptTypes"
:multiple="upload.acceptsMultiple"
@files-uploaded="filesAdded"
@file-removed="fileRemoved"></file-upload>
</body>| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| acceptTypes | String | '' | false | HTML input accept types |
| multiple | Boolean | 0 | false | Should the upload accept one or multiple files |
| Name | Returns | Description |
|---|---|---|
| files-uploaded | array of files | Returns an array with files added |
| file-removed | array of files | Returns an array of the remaining files |
Please see CONTRIBUTING for details.
The MIT License (MIT). Please see License File for more information.