File upload component for Vue.js

v-file-upload

File upload component for Vue.js.

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