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 | | unique-id | String | False | '000' | Helpful when using more than one instance of the component on the same page |

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

• Daniel Fernando Lourusso

License

This project is licensed under MIT License