v-file-upload

File upload component for Vue.js.

View demo Download Source

Installation

Using yarn

yarn add v-file-upload

Using npm

npm i --save v-file-upload

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

GitHub