# react-imgfile

> Simple component for upload and validate (client side) images with preview built with React.js. This package use [react-flip-move](https://github.com/joshwcomeau/react-flip-move) for animate the file preview images. Also, this package use [react-dnd](http

Latest version **0.1.4** (published 2021-07-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-imgfile
pnpm add react-imgfile
yarn add react-imgfile
bun add react-imgfile
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.4 |
| Published | 2021-07-29 |
| First published | 2021-07-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 33.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | mathucate |
| Keywords | img, image, upload, file, sort, react image upload, sortable image |

## Links

- npm: https://www.npmjs.com/package/react-imgfile
- Repository: https://github.com/mathucate/react-imgfile
- Homepage: https://github.com/mathucate/react-imgfile#readme
- Issues: https://github.com/mathucate/react-imgfile/issues
- npm.io page: https://npm.io/package/react-imgfile

## Dependencies (3)

- [react-dnd](https://npm.io/package/react-dnd.md) ^14.0.2
- [immutability-helper](https://npm.io/package/immutability-helper.md) ^3.1.1
- [react-dnd-html5-backend](https://npm.io/package/react-dnd-html5-backend.md) ^14.0.0

## Alternatives

- [unionfs](https://npm.io/package/unionfs.md) — 2.2M weekly downloads
- [path-starts-with](https://npm.io/package/path-starts-with.md) — 35.9K weekly downloads
- [redzip](https://npm.io/package/redzip.md) — 1.2K weekly downloads
- [vscode-anymatch](https://npm.io/package/vscode-anymatch.md) — 848 weekly downloads
- [@ledgerhq/coin-filecoin](https://npm.io/package/@ledgerhq/coin-filecoin.md) — 793 weekly downloads

## Recent versions

- 0.1.4 (latest) — 2021-07-29
- 0.1.3 — 2021-07-29
- 0.1.2 — 2021-07-29
- 0.1.1 — 2021-07-29
- 0.1.0 — 2021-07-29

## README

# Images uploader UI component

Simple component for upload and validate (client side) images with preview built with React.js.
This package use [react-flip-move](https://github.com/joshwcomeau/react-flip-move) for animate the file preview images.
Also, this package use [react-dnd](https://github.com/react-dnd/react-dnd) for drag and drop sorting among preview images.

## Installation

```bash
npm install react-imgfile
```

## Usage

```javascript
import React, { useState } from "react";
import ImgFileInput from "react-imgfile";

function App = (props) => {
  const [files, setFiles] = useState([])

  const onChange = (files, pictures) => {
    console.log(pictures) // Array of base64 data
    setFiles([...files]) // Array of file objects for FormData
  }

  render() {
    return (
      <ImgFileInput
        buttonText='Choose images'
        onChange={onChange}
        maxFileSize={5242880}
      />
    );
  }
}
```

### Available Options

|     parameter      |   type   |                    default                    | description                                                   |
| :----------------: | :------: | :-------------------------------------------: | :------------------------------------------------------------ |
|     className      |  String  |                       -                       | Class name for the input.                                     |
| fileContainerStyle |  Object  |                       -                       | Inline styles for the file container.                         |
|      onChange      | Function |                       -                       | On change handler for the input.                              |
|  buttonClassName   |  String  |                       -                       | Class name for upload button.                                 |
|    buttonStyles    |  Object  |                       -                       | Inline styles for upload button.                              |
|       accept       |  String  |                  "image/\*"                   | Accept attribute for file input.                              |
|        name        |  String  |                       -                       | Input name.                                                   |
|      withIcon      | Boolean  |                     true                      | If true, show upload icon on top                              |
|     buttonText     |  String  |                "Choose images"                | The text that display in the button.                          |
|     withLabel      | Boolean  |                     true                      | Show instruction label                                        |
|       label        |  String  | "Max file size: 5mb, accepted: jpg\|gif\|png" | Label text                                                    |
|    labelStyles     |  Object  |                       -                       | Inline styles for the label.                                  |
|     labelClass     |  string  |                       -                       | Class name for the label                                      |
|    imgExtension    |  Array   |       ['.jpg', '.jpeg', '.gif', '.png']       | Supported image extension (will use in the image validation). |
|    maxFileSize     |  Number  |                    5242880                    | Max image size.                                               |
|   fileSizeError    |  String  |            " file size is too big"            | Label for file size error message.                            |
|   fileTypeError    |  String  |      " is not supported file extension"       | Label for file extension error message.                       |
|     errorClass     |  String  |                       -                       | Class for error messages                                      |
|     errorStyle     |  Object  |                       -                       | Inline styles for errors                                      |
|    singleImage     | Boolean  |                     false                     | If true, only a single image can be selected                  |
|   defaultImages    |  Array   |                       -                       | Pre-populate with default images.                             |

### License

MIT

---
_Source: https://npm.io/package/react-imgfile · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._