The purpose of this post is to show some things that some people might struggle with when starting working with Formik.

If you do not yet know about Formik please refer to its Github or these posts:

I’m gonna make these examples simple and understandable for demonstration purposes. I’m also going to leave out some features intentionally so I can throw some challenges at you in the end!

Uploading one file 📎

I’m pretty sure all of us have tried file uploading in forms. In the Formik docs there are no indications or directions for file uploading but it as simple as handling a react-select select box.

All you really need is an entry for the values of Formik (in this case called file) and setup the onChange to use Formiks’ setFieldValue function. Remember we can easily access the uploaded file by using event.currentTarget.files[0]!

It’s easy as:

example function for handling file input

and Formik holds the File object for you. You can do whatever you want with it. Get the name, size and type?

example code for showing file data

So with all this data you can show the image in a little thumbnail below the input like so:

thumbnail example

Checkout the CodeSandbox.io example below to see how you can easily accomplish this. For the thumbnail generation I went really simple. No need for fancy stuff for demonstration purposes.