vue-simple-upload
An simple file upload component for vue.js.
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
... components: 'fileupload': FileUpload ...
After that, you can use it in your templates:
CommonJS
var Vue = var FileUpload = var YourComponent = Vue
Browser
Usage
<template><fileupload target="http://localhost:8000/api/upload" action="POST" v-on:progress="progress" v-on:start="startUpload" v-on:finish="finishUpload"></fileupload></template> <script>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); } }})</script>
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"
{ { // start event }}
- File Upload finish event: You can access the start event using v-on:finish="finishUpload"
{ { // finish event }}
- File Upload progress event: You can access the file upload progress using v-on:progress="progress"
{ { // listen to file upload progress }}
Todos
- Multi File Upload
License
Released under the MIT License.