0

I'm trying to validate a material-ui-dropzone component (It's upload files !) inside Formik Field API as a child component, but it doesn't' work well. I got this error when i upload a file :

TypeError: can't access property "type", target is undefined

I already tried to override the onChange function for trying to correctly add the file into the form object :

field.onChange = (e) => {
    form.values.appLogo = e;
    form.touched.appLogo = true;
}

but it doesn't work well. The object form contain what i want, but my UI render the previous state and it's problematic because i need to know that everything is OK to enable the "Next form step" button.

Here is the problematic part of my code :

const Step1 = (props) => {
  return (
    <Field name="appLogo">
      {({ field, form, meta }) => (
        /**
         *  Overriding of onChange
         */
        <div>
          {
            (field.onChange = (e) => {
              form.values.appLogo = e;
              form.touched.appLogo = true;
            })
          }
          <DropzoneArea
            filesLimit={1}
            acceptedFiles={["image/png"]}
            dropzoneClass="dropzoneArea"
            dropzoneText=""
            showAlerts
            {...field}
          />
        </div>
      )}
    </Field>
  );
};

Can you help me please ?

2
  • Do you want to execute field.onChange when there is a new file uploaded?
    – dannyxnda
    Mar 3, 2021 at 17:14
  • Yes. the function is well executed but it uses e.target.value by default which returns undefined in my case. I have to save e instead Mar 4, 2021 at 7:46

3 Answers 3

2

Thank to nguyễn-trần-tâm

My problem is finally solved with the following code :

<Field name="appLogo">
    {({ field, form, meta }) => (
        <DropzoneArea
            filesLimit={1}
            acceptedFiles={["image/png"]}
            dropzoneClass="dropzoneArea"
            dropzoneText=""
            {...field}
            onChange={(e) => {
                props.setFieldValue("appLogo", e);
            }}
            showAlerts
        />
    )}
</Field>
1
  • 1
    this will work correctly if only the onChange is added right after the {...field}. This way we can override the onChange coming from field with our custom onChange handler Aug 11, 2021 at 20:03
0

You shouldn't override onChange function. Can you try using setFieldValue instead https://github.com/formium/formik/issues/1243

0
0

I encountered the same issue in Formik v1 as well, and I found the usage for onChange is:

onChange(FIELD_NAME)(VALUE)

Which can refer to this comment

Modify your previous code will look like this:

<Field name="appLogo">
    {({ field, form, meta }) => (
        <DropzoneArea
            filesLimit={1}
            acceptedFiles={["image/png"]}
            dropzoneClass="dropzoneArea"
            dropzoneText=""
            {...field}
            onChange={(e) => {
                field.onChange("appLogo", e);
            }}
            showAlerts
        />
    )}
</Field>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.