v-file-upload

> File upload component for Vue.js

Installation

$3

yarn add v-file-upload

$3

npm i --save v-file-upload

Demo

DEMO

Usage

$3

``js
import Vue from 'vue'

import FileUpload from 'v-file-upload'

Vue.use(FileUpload)
`

$3

`js
import { FileUploadService } from 'v-file-upload'
`

Examples

$3

`html



`

#### 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 |

#### 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 |

$3

`js
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

* Daniel Fernando Lourusso

License

This project is licensed under
MIT License