v-upload-base64

Vue Component for upload a file with drag and drop, and out data will be json with data in base64 formate

Usage no npm install needed!

<script type="module">
  import vUploadBase64 from 'https://cdn.skypack.dev/v-upload-base64';
</script>

README

v-upload-base64

File upload component for Vue.js

Downloads Version License

Installation

Using yarn

yarn add v-upload-base64

Using npm

npm i --save v-upload-base64

Usage

Examples

As component

<template>
  <v-upload multiple v-model="form.file" @input="file" @update="files">
    <template v-slot:default="a">
      <i @click="a.open()" class="cursor-pointer material-icons" >add_circle_outline</i>
    </template>
  </v-upload>
</template>

<script>
import VUpload from 'v-upload-base64';

export default {
  data () {
    return {
      form: {
        file: []
      }
    }
  },
  methods: {
    file (f) {
      console.log(f); // a File object or collection of File objects
    },
    files(f) {
      console.log(f); // a collection of File objects
    }
  }
}
</script>

Properties

Name Type Required Default Info
v-model Any False
camera Boolean False False If true when open on mobile devise will be open the camera, not chose a file
multiple Boolean False False If you want to select multiple file should be true
types String False 'image/*' Types for inpyt type file
clear Boolean False True Clear internal container if select another file(s)
debug Boolean False True Show debug information
maxSize Number False 0 Max size of file for upload in 'Mb', 0 = any size
disabled Boolean False False Set true for disable ability for upload anything

Events

Name Params Info
input event: File Object or [File, File,...] Triggered after File readed from disk
update event: [File, File,...] Triggered after File readed from disk

Suggest

For create from base64 img src or show pdf or xls file on new browser window you can use package satellite vue-small-plugin

License

This project is licensed under MIT License