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

| Name | Type | Default | Description | | --------------------- | --------- | -------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ | | size | Number | 2097152 | To validate the file size pass a number in bytes. | | validExtension | array | ['jpg', 'jpeg', 'png', 'svg', 'txt', 'xlx', 'pdf', 'docx', 'doc', 'csv'] | To validate the file type pass an Array of extensions. | | extValidation | boolean | true | Use to enable or disable file type validation. | | sizeValidation | boolean | true | Use to enable or disable file size validation. | | extValidationMsg | string | File extension not supported! | Use string to customize extension validation message. | | sizeValidationMsg | string | File size is more than 2 MB | Use string to customize file size validation message. | | optional | boolean | false | Use to show optional word beside the label if your field is optional. | | errorMsz | string | '' | Use it if you want to show the user any custom error message. | | id | string | '' | Use it to set input id | | fileUrl | string | '' | Use a file URL to show the file that the user previously uploaded. We normally use this when we are updating data. | | fileName | string | '' | Show the file name that the user previously uploaded. We normally use this when we are updating data. |

Events

| Name | Description | | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | fileUploaded | This event will emit when the user uploads a file. | | removeDoc | This event will emit when the user presses the remove button to remove the previous file and upload a new one. Normally we need this event when a user tries to update data. |