I have a dependent dropdown that changes some props on v-file-input as some selections should only allow a single file input and a pdf only. I am struggling to get the file validation to show up despite the rules I am putting in place.
<v-select
v-model="uploadTypeModel"
:items="cleanAllowableUploadTypes"
item-title="name"
label="File category uploading"
:counter="300"
class="mb-2 mt-5"
variant="outlined"
return-object
:rules="objectRequiredRule"
></v-select>
<v-file-input
v-model="filesToUploadModel"
:show-size="1000"
color="primary"
label="Supporting Documents"
placeholder="Select your supporting documents"
prepend-inner-icon="mdi-file"
prepend-icon=""
variant="outlined"
counter
comfortable
:multiple="uploadTypeModel != null && (uploadTypeModel.name == 'Revised Certification' || uploadTypeModel.name == 'Addendum') ? false : true"
:rules="uploadTypeModel != null && (uploadTypeModel.name == 'Revised Certification' || uploadTypeModel.name == 'Addendum') ? certificationOrAddendumRule : arrayRequiredRule"
:accept="uploadTypeModel != null && (uploadTypeModel.name == 'Revised Certification' || uploadTypeModel.name == 'Addendum') ? '.pdf' : ''"
>
<template v-slot:selection="{ fileNames }">
<template v-for="(fileName) in fileNames" :key="fileName">
<v-chip
class="me-2"
color="blue-accent-4"
size="small"
label
>
{{ fileName }}
</v-chip>
</template>
</template>
</v-file-input>
My script is as follows:
const arrayRequiredRule = [ (value: string) => !!(value && value.length) || 'Required.']
const certificationOrAddendumRule = [
(v: any) => !!v || "File is required!",
(v: any) => v.type == 'application/pdf' || "File must be a pdf!",
(v: any) => v.isArray || "Only one document allowed for this type of upload!"]