@pranavraut033/v-file-upload
TypeScript icon, indicating that this package has built-in type declarations

3.1.10 • Public • Published

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

Package Sidebar

Install

npm i @pranavraut033/v-file-upload

Weekly Downloads

0

Version

3.1.10

License

MIT

Unpacked Size

16.9 kB

Total Files

7

Last publish

Collaborators

  • pranavraut033