An simple file upload component for vue.js.

Checkout Demo on JSFiddle

npm install vue-simple-upload

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.

import FileUpload from 'vue-simple-upload/dist/FileUpload' export default { ... components: { 'fileupload': FileUpload }, ... }

After that, you can use it in your templates:

<fileupload target="http://localhost:8000/api/upload" action="POST"></fileupload>

var Vue = require('vue') var FileUpload = require('vue-simple-upload') var YourComponent = Vue.extend({ ... components: { 'fileupload': FileUpload.FileUpload }, ... })

<script src="path/to/vue/vue.min.js"></script> <script src="path/to/vue-simple-upload/dist/vue-simple-upload.min.js"></script> <script> new Vue({ ... components: { 'fileupload': FileUpload.FileUpload }, ... }) </script>

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

• target (String): Target endpoint to upload the file

• action (String): Target action ( POST or PUT )

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"

methods() { startUpload(e) { // start event } }

• File Upload finish event: You can access the start event using v-on:finish="finishUpload"

methods() { finishUpload(e) { // finish event } }

• File Upload progress event: You can access the file upload progress using v-on:progress="progress"

methods() { progress(e) { // listen to file upload progress } }

• Multi File Upload

Released under the MIT License.