Skip to content
master
Switch branches/tags
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
bin
Jun 12, 2017
Aug 24, 2018
Jan 4, 2019
Aug 24, 2018
Jan 4, 2019
Jun 12, 2017
Jun 12, 2017
Jan 4, 2019

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

License

This project is licensed under MIT License

About

File upload component for vue.js

Resources

Packages

No packages published