Custom input file Field gives an error when upload a file

[paulorodrigues-mb]

What happened?

When trying to customize a input file I use this:

<Field v-slot="{ field }" name="file">
  <input v-bind="field" type="file" />
</Field>

But some errors appears on console.

Reproduction steps

On demo link, just select a file and you will see the errors in console.

Version

Vue.js 3.x and vee-validate 4.x

What browsers are you seeing the problem on?

• Firefox
• Chrome
• Safari
• Microsoft Edge

Relevant log output

InvalidStateError
An attempt was made to use an object that is not, or is no longer, usable

Running local on chrome I can pause on unhandled exceptions and saw this message:

Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string

### Demo link

https://codesandbox.io/s/wild-river-xgptx

### Code of Conduct

- [X] I agree to follow this project's [Code of Conduct](CONDUCT.md)

[logaretm]

I wouldn't say this is a vee-validate issue as generally you wouldn't bind value prop to a type=file field.

I think this should be mentioned in the docs, generally you would do this instead:

    <Field name="file" v-slot="{ handleChange, value }">
      <input type="file" @change="handleChange" />
      <pre>{{ value }}</pre>
    </Field>

[bogdan12893]

@logaretm can i use on input type file a custom method on change event? I can't validate the the selected file.

Field(name="file" v-slot="{ handleChange, value, validate }" rules="required")
    input(type="file" @change="handleFileChange($event, validate)")

I also need to preview the image file.

[vbullsey]

can i use a custom method?