Simple File upload component for Vue.js
Clone or download
Latest commit 4fcb85c Jan 22, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build fixed babel preset issue Apr 14, 2017
dist updated .babelrc config Apr 14, 2017
src custom file name Sep 1, 2017
test/unit updated test case Jan 17, 2017
.babelrc fixed babel preset issue Apr 14, 2017
.eslintrc.js added file upload progress Jan 16, 2017
.gitignore added file upload progress Jan 16, 2017
.travis.yml added test cases Jan 17, 2017
LICENCE added file upload progress Jan 16, 2017
README.md Added JSFiddle Demo link Apr 19, 2017
_config.yml added file upload progress Jan 16, 2017
package.json version upgrade Apr 14, 2017
yarn.lock updated .babelrc config Apr 14, 2017

README.md

vue-simple-upload

npm npm vue2 Build Status

An simple file upload component for vue.js.

Checkout Demo on JSFiddle

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

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>

CommonJS

var Vue = require('vue')
var FileUpload = require('vue-simple-upload')

var YourComponent = Vue.extend({
  ...
  components: {
    'fileupload': FileUpload.FileUpload
  },
  ...
})

Browser

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

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

Todos

  • Multi File Upload

License

Released under the MIT License.