# formik-file-and-image-input

> Ready to use file and image input for formik

Latest version **0.0.6** (published 2021-09-07) · ISC license · 0 weekly downloads

## Install

```sh
npm install formik-file-and-image-input
pnpm add formik-file-and-image-input
yarn add formik-file-and-image-input
bun add formik-file-and-image-input
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.6 |
| Published | 2021-09-07 |
| First published | 2021-02-28 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 23 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Rahul Shah |
| Maintainers | rahulshah4994 |
| Keywords | formik, file, image, upload, form |

## Links

- npm: https://www.npmjs.com/package/formik-file-and-image-input
- npm.io page: https://npm.io/package/formik-file-and-image-input

## Dependencies (1)

- [react-dom](https://npm.io/package/react-dom.md) ^17.0.2

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.6 (latest) — 2021-09-07
- 0.0.5 — 2021-02-28
- 0.0.3 — 2021-02-28
- 0.0.2 — 2021-02-28

## README

### 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**

```bash
npm install formik-file-and-image-input --save
```

**yarn**

```bash
yarn add formik-file-and-image-input
```

### Example

```js
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.

---
_Source: https://npm.io/package/formik-file-and-image-input · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._