v-file-upload
File upload component for Vue.js
Installation
Using yarn
yarn add v-file-upload
Using npm
npm i --save v-file-upload
Demo
Usage
As component
import Vue from 'vue'
import FileUpload from 'v-file-upload'
Vue.use(FileUpload)
As service
import { FileUploadService } from 'v-file-upload'
Examples
As component
">
<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': '' }, filesUploaded: [] } }, methods: { thumbUrl (file) { return file.myThumbUrlProperty }, onFileChange (file) { // Handle files like: this.fileUploaded = file } } } script>
Properties
| 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 |
| unique-id | String | False | '000' | Helpful when using more than one instance of the component on the same page |
Events
| 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 |
As service
import { FileUploadService } from 'v-file-upload'
export default {
data() {
return {
url: 'http://your-post.url',
headers: { 'access-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
}
}
}
Development
yarn dist
Author
License
This project is licensed under MIT License
231 Nov 21, 2022
59 Nov 14, 2022
232 Feb 24, 2022
41 Nov 17, 2022
5 Jul 24, 2022
8 Aug 17, 2022
0 Dec 13, 2018
146 Dec 14, 2022
704 Dec 22, 2022
1 Feb 5, 2020
6 Oct 20, 2020
9 Sep 21, 2021
0 Nov 11, 2021
1 Oct 7, 2022
0 Nov 18, 2020
1 Dec 19, 2021
319 Jul 7, 2022
0 Dec 13, 2019
109 Dec 3, 2022