Problem validating file input with yup

[willococa]

const schema = yup.object({
    title: yup.string().required(),
    excerpt: yup.string().required(),
    body: yup.string().required(),
    category_id: yup.number().required(),
    thumbnail: yup.mixed().required('Thumbnail is required')
        .test("is-valid-type", "Not a valid image type",
            value => isValidFileType(value && value.name.toLowerCase(), "image"))
        //   .test("is-valid-size", "Max allowed size is 100KB",
        //     value => value && value.size <= MAX_FILE_SIZE)

});

const { values, errors, defineInputBinds } = useForm({
  validationSchema: schema,
});

let title = defineInputBinds('title');
let excerpt = defineInputBinds('excerpt');
let body = defineInputBinds('body');
let category_id = defineInputBinds('category_id');
let thumbnail = defineInputBinds('thumbnail')  //this doesnt work

function setFile(e){
    let files = e.target.files
   thumbnail = files[0]//this line doesnt work either
    alert(JSON.stringify(thumbnail, null, 2));
   }

// Creates a submission handler
// It validate all fields and doesn't call your function unless all fields are valid
const onSubmit = handleSubmit(values => {
    alert(JSON.stringify(values, null, 2));

});

the form

<form class="post-form" name="post" @submit.prevent="onSubmit" enctype="multipart/form-data">
                <input type="text" v-bind="title" name="title" placeholder="Title.."/>
                <pre>{{errors.title}}</pre>
                <input type="text" v-bind="excerpt" name="excerpt" placeholder="Excerpt.."/>
                <pre>{{errors.excerpt}}</pre>
                <input
                    type="file"
                    accept="image/*"
                    @change="setFile"
                    name="thumbnail"
                    id="thumbnail"/>
                <pre>{{errors.thumbnail}}</pre>
                <select name="category" v-bind="category_id" class="form-control">
                    <option v-for="category in categories" :value="category.id">{{ category.name }}</option>
                </select>
                <pre>{{errors.category_id}}</pre>
                <textarea v-bind="body" name="body" id="body" placeholder="Body..."></textarea>
                <pre>{{errors.body}}</pre>
                <button type="submit">Create</button>
            </form>

I just want to know if theres a way to make the validation react and be "bound" to the schema and react to it with the composition api and using yup, I just can't find a solution in the documentation as the only solution i see thee uses component and i don't see the relationship between this and a yup schema, how do i attach the file input to the validation made in the schema so when i have the onSubmit function i can do something with the values

[logaretm]

Can you create a sandbox with it? It will be much easier for me to debug than copying/pasting your code. I will take a look then.

I moved this to discussions since it is more of a question.