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



File upload component for Vue.js

Downloads Version License


Using yarn

yarn add v-upload-base64

Using npm

npm i --save v-upload-base64



As component

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

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


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


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


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


This project is licensed under MIT License