# photo-upload-component

Latest version **1.6.0** (published 2021-08-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install photo-upload-component
pnpm add photo-upload-component
yarn add photo-upload-component
bun add photo-upload-component
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.6.0 |
| Published | 2021-08-03 |
| First published | 2021-08-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 26.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | haribhandari |
| Keywords | image, upload, file, react image upload, react image upload limit |

## Links

- npm: https://www.npmjs.com/package/photo-upload-component
- Repository: https://github.com/GeraudWilling/react-images-upload
- Homepage: https://github.com/GeraudWilling/react-images-upload#readme
- Issues: https://github.com/GeraudWilling/react-images-upload/issues
- npm.io page: https://npm.io/package/photo-upload-component

## Dependencies (1)

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

## Recent versions

- 1.6.0 (latest) — 2021-08-03
- 1.3.5 — 2021-08-03
- 1.3.4 — 2021-08-03
- 1.3.3 — 2021-08-03
- 1.3.2 — 2021-08-03
- 1.3.1 — 2021-08-01
- 1.3.0 — 2021-08-01

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

## Installation

```bash
npm install --save photo-upload-component
```

## Usage

```javascript
import React from 'react';
import ImageUploader from 'photo-upload-component';

class App extends React.Component {

	constructor(props) {
		super(props);
		 this.state = { pictures: [] };
		 this.onDrop = this.onDrop.bind(this);
	}

	onDrop(picture) {
		this.setState({
            pictures: this.state.pictures.concat(picture),
        });
	}

    render() {
        return (
            <ImageUploader
				withIcon={true}
				buttonText='Choose images'
				onChange={this.onDrop}
				imgExtension={['.jpg', '.gif', '.png', '.gif']}
				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. |
| withPreview | Boolean | true | Show preview of selected images. |
| accept | String | "accept=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|gif' | Label text |
| labelStyles | Object | - | Inline styles for the label. |
| labelClass | string | - | Class name for the label |
| imgExtension | Array | ['.jpg', '.gif', '.png', '.gif'] | 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 |
|   maxFiles      |  Number  |                 99                 | Max number of files to upload.                                |

### License
MIT

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