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

[ikreb7]

What happened?

I want to validate a input file field and validate this with the vee-validate. But If I choose a file I get this error message. I think the codesandbox example show it very well.

Reproduction steps

No response

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

No response

Demo link

https://codesandbox.io/s/mystifying-mclaren-orjrti?file=/src/components/HelloWorld.vue

Code of Conduct

• I agree to follow this project's Code of Conduct

[logaretm]

Are you sure? I can't see anything in the example related to inputs.

[ikreb7]

Are you sure? Here is the code example from codesandbox. You have to select a file. It doesn't throw errors if I use it without the <Field>-component.

<template>
  <div>
    <Form 
      as="form"
      class="needs-validation"
      :validation-schema="schema"
      novalidate=""
    >
      <div>
        <div class="row">
          <label for="formFile" class="col-sm-2 col-form-label">
            Upload field
          </label>
          <div class="col-9">
            <Field 
              name="formFile" 
              type="file" 
              v-slot="{ meta, field }"
            >            
              <input 
                v-bind="field"
                type="file" 
                class="form-control"
                :class="{
                  'is-valid': meta.valid && meta.touched,
                  'is-invalid': !meta.valid && meta.touched,
                }"
              >
            </Field>
            <ErrorMessage as="div" name="name" class="invalid-feedback" />
          </div>
        </div>
      </div>
      <div class="row m-5">
        <div class="col-auto">
          <input type="file" class="form-control" />
        </div>
      </div>
    </Form>
  </div>
</template>


<script>
import { markRaw } from 'vue';
import { Form, Field, ErrorMessage } from 'vee-validate';
import { object, mixed } from 'yup';

export default {
  name: "HelloWorld",
  components: {
    Form,
    Field,
    ErrorMessage,
  },
  props: {},
  data () {
    return {
      schema: markRaw(object().shape({
        formFile: mixed().required("This field is required"),
      })),
    }
  }

};
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

[logaretm]

Yea the example doesn't have that code. At least for me, anyways copied your code there and i can see the problem now.

v-bind="field" doesn't account for type=file at the moment, since file inputs cannot have two-way binding. As a workaround you can do the following:

<Field 
  name="formFile" 
  type="file" 
  v-slot="{ meta, handleChange }"
>            
  <input 
    @change="handleChange"
    type="file" 
    class="form-control"
    :class="{
      'is-valid': meta.valid && meta.touched,
      'is-invalid': !meta.valid && meta.touched,
    }"
  >
</Field>

I will keep this open to think about if vee-validate should handle this case if you pass type=file to the Field component or not since it might affect custom file input components as well.

[ikreb7]

Thank your very much! It works :)

Sounds good, if you change the binding or mention this in the documentation.

[logaretm]

I decided to mark this as a bug since clearly some conditions didn't work as expected. Fixed in 3c76bb2