Trying to upload a file using Formik but get an InvalidStateError: Failed to set the 'value' property on 'HTMLInputElement':

[Stephane-Pires]

I'm trying to upload a simple image file.

But can't understand why i'm getting

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

Here's my code :)

export const ImageUploaderField = ({ ...props }) => {
    const { setFieldValue } = useFormikContext()
    const [field] = useField(props)

    return (
        <Field
            {...field}
            {...props}
            onChange={(event) => {
                setFieldValue(field.name, event.currentTarget.files[0])
            }}
        />
    )
}

Usage

<ImageUploaderField name="filename" type="file" />

I have been struggling with this the whole day.

Also, i'm new to Formik, but i know a bit about React :)

[josangelATM]

Same here :(

[josangelATM]

Guys if you need, is a weird solution but its working for me.

https://stackoverflow.com/questions/66876022/setfieldvalue-formik-and-invalidstateerror-failed-to-set-the-value-property

[voranzovv]

@josangelATM Thanks buddy

[youngkashew]

This worked, thanks!

[cristianTOTH]

worked!!

[ForJessicaSake]

you saved my life lol, thanks

[chinanderm]

The value of input with type "file" can only be set by the user, not code. Thus, supplying a value attribute/prop results in the error you're getting. Instead of using <Field /> you should instead add the relevant onChange, onBlur, etc fields yourself.

Here's how I have approached it:

<MyFileInput
  inputProps={{
    id: 'logoFile',
    name: 'logoFile',
    onBlur: () => setFieldTouched('myFile'),
    onChange: e => setFieldValue('myFile', e.target.files),
  }}
  label="Select a File"
  onRemove={() => {
    setFieldValue('myFile', null)
  }}
/>

... in MyFileInput ...
<input type="file" {...props.inputProps} />

[BlackBeardo]

I had same error in my custom react-dropzone component. i removed value and now it's working. I have some unhealthy(atleast I think it is) for file uploader component with dropzone + controlled input from react-form-hook + Yup.

I found it here.
its for angular, but core logic was same for my react component.

if you want I can show some code snippets, if that helps. let me know. not pasting for now.