Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/saivarunk/vue-simple-upload
Simple File upload component for Vue.js
https://github.com/saivarunk/vue-simple-upload
vue vue-component vue-components
Last synced: 5 days ago
JSON representation
Simple File upload component for Vue.js
- Host: GitHub
- URL: https://github.com/saivarunk/vue-simple-upload
- Owner: saivarunk
- License: mit
- Created: 2017-01-10T07:17:44.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-06T23:14:41.000Z (about 2 years ago)
- Last Synced: 2024-04-14T13:13:24.414Z (10 months ago)
- Topics: vue, vue-component, vue-components
- Language: HTML
- Homepage: https://saivarunk.github.io/vue-simple-upload/
- Size: 267 KB
- Stars: 148
- Watchers: 3
- Forks: 30
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-vue - vue-simple-upload - simple-upload?style=social) - 简单的VueJS上传组件 (UI组件)
- awesome-github-vue - vue-simple-upload - 简单的VueJS上传组件 (UI组件)
- awesome-github-vue - vue-simple-upload - 简单的VueJS上传组件 (UI组件)
- awesome - vue-simple-upload - 简单的VueJS上传组件 (UI组件)
README
# vue-simple-upload
[ ](https://www.npmjs.com/package/vue-simple-upload)
[](https://vuejs.org/)
[](https://travis-ci.org/saivarunk/vue-simple-upload)
An simple file upload component for vue.js.
Checkout Demo on [JSFiddle](https://jsfiddle.net/saivarunk/o9vwjnar/)
## Installation
`npm install vue-simple-upload`
## Usage
vue-simple-upload is a UMD module, which can be used as a module in both CommonJS and AMD modular environments.
When in non-modular environment, FileUpload will be registered as a global variable.
### ES6
```js
import FileUpload from 'vue-simple-upload/dist/FileUpload'
export default {
...
components: {
'fileupload': FileUpload
},
...
}
```
After that, you can use it in your templates:
```html
```
### CommonJS
```js
var Vue = require('vue')
var FileUpload = require('vue-simple-upload')
var YourComponent = Vue.extend({
...
components: {
'fileupload': FileUpload.FileUpload
},
...
})
```
### Browser
```html
new Vue({
...
components: {
'fileupload': FileUpload.FileUpload
},
...
})
```
## Usage
```vue
new Vue({
...
components: {
'fileupload': FileUpload.FileUpload
},
methods: {
startUpload(e) {
// file upload start event
console.log(e);
},
finishUpload(e) {
// file upload finish event
console.log(e);
},
progress(e) {
// file upload progress
// returns false if progress is not computable
console.log(e);
}
}
})
```
## Props
- target (String):
Target endpoint to upload the file
- action (String):
Target action ( POST or PUT )
## Events
You can access the file upload events using v-on methods.
- File Upload start event:
You can access the start event using v-on:start="startUpload"
```js
methods() {
startUpload(e) {
// start event
}
}
```
- File Upload finish event:
You can access the start event using v-on:finish="finishUpload"
```js
methods() {
finishUpload(e) {
// finish event
}
}
```
- File Upload progress event:
You can access the file upload progress using v-on:progress="progress"
```js
methods() {
progress(e) {
// listen to file upload progress
}
}
```
## Todos
- Multi File Upload
## License
Released under the [MIT](LICENCE) License.