Formik File and Image Input
Documentation
Installation
This component is a helper component for managing file and image inputs with Formik. It is only meant to be used inside Formik which have access to the useFormik hook. Use of these components outside of the Formik context will throw an error.
npm
npm install formik-file-and-image-input --save
yarn
yarn add formik-file-and-image-input
Example
import React from "react";
import { Formik, Form } from "formik";
import * as yup from "yup";
import { FileInput, ImageInput } from "formik-file-and-image-input/lib";
function CustomFileInputWrapper = ({onClick, fileName}) => {
return (
<div>
<button onClick={onClick}>Choose File</button>
<p>{fileName}</p>
</div>
)
}
function CustomImageInputWrapper = ({onClick, fileName, src}) => {
return (
<div onClick={onClick}>
{!src && <button onClick={onClick}>Choose Image</button>}
<img src={src} />
<p>{fileName}</p>
</div>
)
}
export default function MyForm() {
const fileFormats = ["application/pdf"];
const imageFormats = ["image/png", "image/svg", "image/jpeg"];
const initialValues = {
file: null,
image: null,
};
const validationSchema = yup.shape({
file: yup.mixed().required(),
image: yup.mixed().required(),
});
return (
<Formik
initialValues={initialValues}
validationSchema={validationSchema}
onSubmit={(values) => handleSubmit(values)}
>
<Form>
<FileInput
name="file"
validFormats={fileFormats}
component={CustomFileInputWrapper}
/>
<ImageInput
name="image"
validFormats={imageFormats}
component={CustomImageInputWrapper}
/>
<button type="submit">Submit</button>
</Form>
</Formik>
);
}
User guide
FileInput props
Prop name | Description | Default value | Example values |
---|---|---|---|
name | The name of the field as referenced in formik | required | "file","image" |
validFormats | An array of valid MIME formats | required | ['image/png', 'image/svg','application/pdf'] |
component | A custom styled component to handle the file upload. onClick and fileName props will be passed to this component |
<input type="file" /> |
Component({onClick, fileName}) => <div onClick={onClick}>{fileName ? fileName : "Choose a file"}</div> |
ImageInput props
Prop name | Description | Default value | Example values |
---|---|---|---|
name | The name of the field as referenced in formik | required | "file","image" |
validFormats | An array of valid MIME formats | ['image/png','image/svg+xml', 'image/jpeg', 'image/gif','image/bmp','image/tiff','image/webp'] |
['image/png', 'image/svg','application/pdf'] |
component | A custom styled component to handle the file upload. onClick ,src and fileName props will be passed to this component |
<input type="file" /> |
Component({onClick, src, fileName}) => <div onClick={onClick}><img src={src} />{fileName ? fileName : "Choose an image"}</div> |
License
The MIT License.