Formik: Image drop (upload) with preview + Formik

[mwickett]

Has anyone integrated something like react-dropzone with Formik?

I'm having a hard time getting the pattern right on this one.

[jaredpalmer]

@mwickett Formik is not designed to do the image upload itself (but you can do it). Instead, my suggestion is to use react-dropzone's onDrop to upload the file to your API media endpoint and then just store the returned file path in Formik state using setFieldValue. You can use something like setStatus() to track the upload's progress/success/failure etc.

[msmaromi]

@jaredpalmer I think setFieldValue only can be called via onChange. CMIIW.

[nicoqh]

@msmaromi setFieldValue can be used without onChange.

[MontoyaAndres]

I'm trying to upload an image through Formik with React-Dropzone, this is the main code:

onDrop = ([file]) => {
    const {
      field: { name },
      form: { setFieldValue }
    } = this.props;

    setFieldValue(
      name,
      Object.assign(file, {
        preview: URL.createObjectURL(file)
      })
    );
  };

The part:

Object.assign(file, {
  preview: URL.createObjectURL(file)
})

It's only to do a preview of an image. When I do Click in the handleSubmit, only sends me the preview object, the rest of the info disappear.

Someone can help me? If you need more info, I can create a issue to explain it bettter I guess...

[caiorios]

@MontoyaAndres I faced the same issue. The complete object is contained inside the array, so to use them, just iterate over it:

JSON.stringify(
    {
        files: values.fotos.map(file => ({
            fileName: file.name,
            type: file.type,
            size: `${file.size} bytes`
        }))
    }
)