Package Exports

vue-files-upload

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-files-upload) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

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

Author

Daniel Fernando Lourusso

License

This project is licensed under MIT License