vuetify 3 vue 3 file input example

Vuetify 3 Vue 3 File Input Example

VueJS
09/09/23
Webvees

In this tutorial, we will see file inputs using vuetifyjs 3 in Vue.js 3 . We will see file inputs with icon, multiple file upload, Before we begin, you need to install and configure Vuetify 3 in Vue 3.

How to Install Vuetify 3 in Vue 3

Vuetify 3 Vue 3 File Input Example

1. Vuetify 3 vue 3 file inputs default, outlined, solo, disabled using v-file-input component.

<template>
  <div class="d-flex flex-column">
    <v-file-input label="File input"></v-file-input>
    <v-file-input label="File input" variant="outlined"></v-file-input>
    <v-file-input label="File input" variant="underlined"></v-file-input>
    <v-file-input label="File input" variant="solo"></v-file-input>
    <v-file-input label="File input" variant="solo-filled"></v-file-input>
    <v-file-input label="File input" variant="solo-inverted"></v-file-input>
    <v-file-input disabled label="File input" variant="outlined"></v-file-input>
  </div>
</template>
file inputs using vuetifyjs 3

file inputs using vuetifyjs 3

2. Vuetify 3 vue 3 file inputs image can accept only specific media formats/file.

<template>
 <v-file-input
  accept="image/*"
  label="File input"
 ></v-file-input>
</template>


3. Vuetify 3 vue 3 file inputs a selected file can be displayed as a chip.

<template>
 <div>
  <v-file-input
   chips
   multiple
   label="File input w/ chips"
  ></v-file-input>
  <v-file-input
   small-chips
   multiple
   label="File input w/ small chips"
  ></v-file-input>
 </div>
</template>


4. Vuetify 3 vue 3 file inputs when using the show-size property along with counter.

<template>
 <v-file-input
  show-size
  counter
  multiple
  label="File input"
 ></v-file-input>
</template>
vuetify 3 vue 3  file inputs

vuetify 3 vue 3 file inputs

5. Vuetify 3 vue 3 multiple file upload.

<template>
 <v-file-input
  multiple
  label="File input"
 ></v-file-input>
</template>


6. Vuetify 3 vue 3 file inputs with camera icon.

<template>
 <v-file-input
  label="File input"
  variant="filled"
  prepend-icon="mdi-camera"
 ></v-file-input>
</template>
vuetify 3 file input with icon

vuetify 3 file input with icon

7. Vuetify 3 vue 3 file upload inputs with validation.

<template>
  <v-file-input
    :rules="rules"
    accept="image/png, image/jpeg, image/bmp"
    placeholder="Pick an avatar"
    prepend-icon="mdi-camera"
    label="Avatar"
  ></v-file-input>
</template>
<script>
export default {
  data: () => ({
    rules: [
      (value) => {
        return (
          !value ||
          !value.length ||
          value[0].size < 2000000 ||
          "Avatar size should be less than 2 MB!"
        );
      },
    ],
  }),
};
</script>
vuetify 3 file inputs with validation

vuetify 3 file inputs with validation