File upload component for Vue.js
yarn add v-file-upload
npm i --save v-file-upload
import Vue from 'vue'
import FileUpload from 'v-file-upload'
Vue.use(FileUpload)
import { FileUploadService } from 'v-file-upload'
<template>
<file-upload :url='url' :thumb-url='thumbUrl' :headers="headers" @change="onFileChange"></file-upload>
</template>
<script>
import Vue from 'vue'
import FileUpload from 'v-file-upload'
Vue.use(FileUpload)
export default {
data () {
return {
url: 'http://your-post.url',
headers: {'access-token': '<your-token>'},
filesUploaded: []
}
},
methods: {
thumbUrl (file) {
return file.myThumbUrlProperty
},
onFileChange (file) {
// Handle files like:
this.fileUploaded = file
}
}
}
</script>
Name | Type | Required | Default | Info |
---|---|---|---|---|
url | String | True | Url to POST the files | |
thumb-url | Function | True | Method that should returns the thumb url for the uploaded file | |
accept | String | False | .png,.jpg | File input accept filter |
headers | Object | False | {} | Headers for the request. You can pass auth tokens for example |
btn-label | String | False | Select a file | Label for the button |
btn-uploading-label | String | False | Uploading files | Label for the button when the upload is in progress |
max-size | Number | False | 15728640 //15Mb | Max size for the file |
additional-data | Object | False | {} | Additional data for the request |
Name | Params | Info |
---|---|---|
success | event: XMLHttpRequest event | Triggered after POST success |
error | event: XMLHttpRequest event | Triggered after POST error |
change | files: Array of uploaded files | Triggered after add or remove a file |
progress | progress: Progress percentage | Triggered while the upload is in progress indicating the upload percentage |
import { FileUploadService } from 'v-file-upload'
export default {
data() {
return {
url: 'http://your-post.url',
headers: { 'access-token': '<your-token>' }
}
},
methods: {
mySaveMethod(file) {
let fileUpload = new FileUploadService(
this.url,
this.headers,
this.onProgress
)
fileUpload
.upload(file, { doc_id: 1 })
.then(e => {
// Handle success
})
.catch(e => {
// Handle error
})
},
onProgress(event) {
// Handdle the progress
}
}
}
yarn dist
This project is licensed under MIT License