Veutify v-file-input validation

Question

I would like to validate if a file has been chosen using v-file-input and ValidationProvider from vee-validate.

Below is my code:

<v-flex>
  <ValidationProvider rules="required" v-slot="{ errors }">
    <v-file-input
      show-size
      accept=".xlsx"
      placeholder="Click here to select your file"
      label="File name"
      :error="errors.length > 0"
      :error-messages="errors[0]"
      @change="selectFile"
    >
    </v-file-input>
  </ValidationProvider>
</v-flex>

Somehow the validation works but it works too well even after I have chosen a file:

I am not sure what I have done wrong?

Hade

Answer 1

Found out that I have to do it this way, not sure why mine above not working:

rules: [
  v => !!v || 'File is required',
  v => (v && v.size > 0) || 'File is required',
]

And my form:

<v-flex>
  <ValidationProvider :rules="rules" v-slot="{ errors }">
    <v-file-input
      show-size
      accept=".xlsx"
      placeholder="Click here to select your file"
      label="File name"
      :error="errors.length > 0"
      :error-messages="errors[0]"
      @change="selectFile"
    >
    </v-file-input>
  </ValidationProvider>
</v-flex>

https://codepen.io/subashdbc/pen/eYpVOKq

Posting the codes here to help anyone who needs this.

Hade

Answer 2

You can get this behavior with only Vuetify's v-file-input by using the :rules prop - no need for VeeValidate.

Here is an example with the multiple option.

<template>
   <v-file-input
     multiple
     :rules="[rules.requiredFile]"
   ></v-file-input>
</template>

<script setup lang="ts">

const rules = {
  requiredfile: (v: File[]) => {
    if (v.length == 0) {
      return "Must select at least one file.";
    } else {
      return true;
    }
  },
};

</script>

Wacker