v-file-picker v1.1.2

VFilePicker Plugin for Vue 3

A simple Vue 3 file picker including basic file validation. Such as file size and file type validation.

Install Plugin

npm i v-file-picker

How to use !!!

Method 1

Import within a specific component to use only in a component

After installing import the component in your desired file.

import { VFilePicker } from "v-file-picker";

export default {
  name: "YourComponentName",
  data() {
    return {
      document: "",
    };
  },
};

<!-- Component.vue template -->
<template>
  <v-file-picker
    @fileUploaded="(file) => document = file"
    name="document"
    id="docFile"
    class="col-md-6"
  >
    Document
    <!-- Input label -->
  </v-file-picker>
</template>

Method 2

Import in main.js file to use globally

After installing import the component in your main.js file.

import VFilePicker from "v-file-picker";

createApp(App).use(VFilePicker).mount("#app");

<!-- Component.vue template -->
<template>
  <v-file-picker
    @fileUploaded="(file) => document = file"
    name="document"
    id="docFile"
    class="col-md-6"
  >
    Document
    <!-- Input label -->
  </v-file-picker>
</template>

Attention:

VFilePicker is using bootstrap 5 CSS file. If you have already included a bootstrap CSS file in your project you don't need to import the VFilePicker CSS file. Otherwise, you need to import the CSS file.

<!-- Import css file -->
<style>
  @import "v-file-picker/dist/style.css";
</style>

Example 1

import VFilePicker from "v-file-picker";

export default {
  name: "YourComponentName",
  data() {
    return {
      document: "",
      extensions: ["jpg", "png", "pdf", "doc"],
    };
  },
};

<template>
  <v-file-picker
    @fileUploaded="(file) => document = file"
    :validExtension="extensions"
    name="document"
    id="docFile"
    class="col-md-6"
  >
    Document
  </v-file-picker>
</template>

Example 2

import VFilePicker from "v-file-picker";

export default {
  name: "YourComponentName",
  data() {
    return {
      document: "",
      extensions: ["jpg", "png", "pdf", "doc"],
    };
  },
};

<template>
  <v-file-picker
    @fileUploaded="(file) => document = file"
    :validExtension="extensions"
    :size="2097152"
    name="document"
    id="docFile"
    class="col-md-6"
  >
    <!-- Difine size in bytes -->
    Document
  </v-file-picker>
</template>

Example 3

import VFilePicker from "v-file-picker";

export default {
  name: "YourComponentName",
  data() {
    return {
      document: "",
      extensions: ["jpg", "png", "pdf", "doc"],
      fileName: "https://webartist.xyz/with_file_name_and_url.png",
      fileURL: "with_file_name_and_url.png",
    };
  },
  methods: {
    removeDoc() {
      this.fileName = "";
      this.fileURL = "";
    },
  },
};

<template>
  <v-file-picker
    @fileUploaded="(file) => document = file"
    @removeDoc="removeDoc"
    :validExtension="extensions"
    :size="2097152"
    name="document"
    id="docFile"
    class="col-md-6"
  >
    <!-- Difine size in bytes -->
    Document
  </v-file-picker>
</template>

Configuration

Props

Events