Skip to content
File upload component for vue.js
Branch: master
Clone or download
Latest commit c39471a Jan 4, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
bin
demo fix demo post url Aug 24, 2018
dist rebuild Jan 4, 2019
docs fix demo post url Aug 24, 2018
src
types add typings Jan 4, 2019
.envrc
.gitignore first commit Jun 12, 2017
README.md add development on README Jan 4, 2019
package.json 3.1.7 Jan 4, 2019
poi.config.demo.js
poi.config.js use poi to buildgs Nov 29, 2017
yarn.lock add dev depencencies local Jan 4, 2019

README.md

v-file-upload

File upload component for Vue.js

Downloads Version License

Installation

Using yarn

yarn add v-file-upload

Using npm

npm i --save v-file-upload

Demo

DEMO

Usage

As component

import Vue from 'vue'

import FileUpload from 'v-file-upload'

Vue.use(FileUpload)

As service

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

Examples

As component

<template>
  <file-upload :url='url' :thumb-url='thumbUrl' :headers="headers" @change="onFileChange"></file-upload>
</template>

<script>
import Vue from 'vue'
import FileUpload from 'v-file-upload'
Vue.use(FileUpload)

export default {
  data () {
    return {
      url: 'http://your-post.url',
      headers: {'access-token': '<your-token>'},
      filesUploaded: []
    }
  },
  methods: {
    thumbUrl (file) {
      return file.myThumbUrlProperty
    },
    onFileChange (file) {
      // Handle files like:
      this.fileUploaded = file
    }
  }
}
</script>

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

As service

import { FileUploadService } from 'v-file-upload'
export default {
  data() {
    return {
      url: 'http://your-post.url',
      headers: { 'access-token': '<your-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

License

This project is licensed under MIT License

You can’t perform that action at this time.