Vue Vuetify: Invalid prop: custom validator check failed for prop "value". found in ---> <VFileInput>

Question

I have form with several text fields that's giving me no issues. But I have this file field Im unable to bind to my model. Any sujestions.

<template>
    <v-form ref="form" @submit.prevent="submit" lazy-validation v-model="valid">
        <v-card outlined>
            <v-card-text>
                <v-file-input
                    type="file"
                    :label="labels.user_header_photo"
                    v-model="form.user_header_photo"
                    :error-messages="errors.user_header_photo"
                    :rules="[rules.required('user_header_photo')]"
                    :disabled="loading"
                    @input="clearErrors('user_header_photo')"
                >
                </v-file-input>

                <v-file-input
                    type="file"
                    :label="labels.user_profile_photo"
                    v-model="form.user_profile_photo"
                    :error-messages="errors.user_profile_photo"
                    :rules="[rules.required('user_profile_photo')]"
                    :disabled="loading"
                    @input="clearErrors('user_profile_photo')"
                >
                </v-file-input>

            </v-card-text>
        </v-card>

        <v-divider class="mb-4 mt-4"></v-divider>

        <v-card>
            <v-card-text>
                <v-text-field
                    :label="labels.user_name"
                    v-model="form.user_name"
                    :error-messages="errors.user_name"
                    :disabled="loading"
                    hint="At least 6 characters"
                    autocomplete="user_name"
                    @input="clearErrors('user_name')"
                ></v-text-field>

                <v-text-field
                    :label="labels.user_subscription_fee"
                    v-model="form.user_subscription_fee"
                    :error-messages="errors.user_subscription_fee"
                    :disabled="loading"
                    autocomplete="user_subscription_fee"
                    @input="clearErrors('user_subscription_fee')"
                ></v-text-field>
            </v-card-text>
        </v-card>

        <v-layout mt-12 mx-0>
            <v-spacer></v-spacer>

            <v-btn
                text
                :disabled="loading"
                :to="{ name: 'profile' }"
                color="grey darken-2"
                exact
            >
                Cancel
            </v-btn>

            <v-btn
                type="submit"
                :loading="loading"
                :disabled="loading"
                outlined
                color="black"
                class="ml-4"
            >
                Save
            </v-btn>
        </v-layout>
    </v-form>
</template>

<script>
    import axios from 'axios'
    import { mapGetters } from 'vuex'
    import { api } from '~/config'
    import Form from '~/mixins/form'

    export default {
        mixins: [Form],

        data: () => ({

            label: {
                user_header_photo: 'Upload cover image',
                user_profile_photo: 'Upload profile photo',
                user_name: 'user_name',
                user_subscription_fee: 'user_subscription_fee',
            },

            form: {
                name: null,
                email: null,
                password: null,
                password_confirmation: null,
                user_name: null,
                user_subscription_fee: null,
                user_info: null,
                user_location: null,
                user_website: null,
                user_profile_photo: null,
                user_header_photo: null,
                user_private_account: null,
                user_fans_counter: null,
                new_subscriber_alert: null,
                new_tip_alert: null,
                new_private_message: null,
                new_refferal_alert: null,
                is_active: null,
            }
        }),

        computed: mapGetters({
            auth: 'auth/user',
            setting: 'auth/setting'
        }),

        mounted() {
            this.form = Object.assign(this.form, this.auth, this.setting)
        },

        methods: {
            submit() {

                if (this.$refs.form.validate()) {
                    this.loading = true

                    axios.put(api.path('profile'), this.form)
                        .then(res => {
                            this.$toast.success('Your profile successfully updated.')
                            this.$emit('success', res.data)
                        })
                        .catch(err => {
                            this.handleErrors(err.response.data.errors)
                        })
                        .then(() => {
                            this.loading = false
                        })
                }
            }
        }
    }
</script>

All fields works as they suppose to too. Only the file fields are giving the same error. The complete app is a SPA using laravel as a backend along with vue, vuex

Answer 1

Not sure if it's still relevant, but I had the exact same problem.

I just added [] as the initial value for file fields in the form and the error disappears.

In the docs, they say value can be any, which is wrongly documented.

If those fields are not required, you might want to check them manually before submitting.

Answer 2

if u used v-file-input like

<v-file-input
                    type="file"
                    :label="labels.user_profile_photo"
                    v-model="form.user_profile_photo"
                    :error-messages="errors.user_profile_photo"
                    :rules="[rules.required('user_profile_photo')]"
                    :disabled="loading"
                    @input="clearErrors('user_profile_photo')"
                >
                </v-file-input>

change form.user_profile_photo = '' to form.user_profile_photo=[]

Answer 3

the solution for you problem is :

for image value in you template

<v-file-input
    v-model="image"
>
</v-file-input>

have to be initial value [] your data variable image like this:

export default {
   data: () => ({
      image:[]
   })
}

regards from Bolivia

Answer 4

The received value is a type of FILE : https://developer.mozilla.org/fr/docs/Web/API/File , so all you need to do is to check that it's an instance of FILE and not a string.