Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Image drop (upload) with preview + Formik

See original GitHub issue

Has anyone integrated something like react-dropzone with Formik?

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

Issue Analytics

State:
Created 6 years ago
Comments:5 (1 by maintainers)

Top GitHub Comments

7reactions

jaredpalmercommented, Feb 6, 2019

@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.

1reaction

nicoqhcommented, Jun 24, 2018

@msmaromi setFieldValue can be used without onChange.

Top Results From Across the Web

How to Upload You Image and File using Formik Easily - Morioh

In this video tutorial, we'll learn How to Upload You Image and File using Formik Easily validating form Field. Very simple, in just...

ReactJS: How to handle Image / File upload with Formik?

If you need to preview the uploaded image then you can create a ... You can upload single or multiple files with validation...

Formik multiple upload example - CodeSandbox

Formik multiple upload example. 14. Embed Fork Create Sandbox Sign in. Sandbox Info. Formik multiple upload example. Multiple file upload with Formik.

Upload Images and Files in React with Preview, Progress ...

1) Create a React Application · 2) Install react-dropzone Package · 3) Adding React Dropzone Uploader · 4) Render Drop Zone Uploader in...

<Field /> | Formik

as can either be a React component or the name of an HTML element to render. Formik will automagically inject onChange , onBlur...