# @andfk/react-images-uploading

> A simple images uploader without UI. Building by yourself

Latest version **3.0.0** (published 2020-08-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install @andfk/react-images-uploading
pnpm add @andfk/react-images-uploading
yarn add @andfk/react-images-uploading
bun add @andfk/react-images-uploading
```

## 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 | 3.0.0 |
| Published | 2020-08-21 |
| First published | 2020-08-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=8 |
| Dependencies | 0 |
| Unpacked size | 55.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | imvutoan |
| Maintainers | andfk |
| Keywords | image, images, upload, uploader, uploading, react image upload, react images uploading |

## Links

- npm: https://www.npmjs.com/package/@andfk/react-images-uploading
- Repository: https://github.com/andfk/React-images-uploading
- Homepage: https://github.com/vutoan266/React-images-uploading/blob/master/README.md
- Issues: https://github.com/vutoan266/React-images-uploading/issues
- npm.io page: https://npm.io/package/@andfk/react-images-uploading

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 3.0.0 (latest) — 2020-08-21

## README

# react-images-uploading

Temporary publish of package until [PR](https://github.com/vutoan266/react-images-uploading/pull/13) 
>

[![NPM](https://img.shields.io/npm/v/react-images-uploading.svg)](https://www.npmjs.com/package/react-images-uploading) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

# Images uploader

A simple images uploader without UI. Building by yourself.

## [#Demo](https://codesandbox.io/s/react-images-uploading-demo-u0khz)

## [Introduce blog](https://medium.com/@imvutoan/make-image-upload-in-react-easier-with-react-images-uploading-and-your-ui-983fed029ee2)

## Install

With npm

```bash
npm install --save react-images-uploading
```

With yarn

```bash
yarn add react-images-uploading
```

## Usage

```tsx
import * as React from "react";

import ImageUploading from "react-images-uploading";
// { ImageUploadingPropsType, ImageListType, ImageType } is type for typescript

const maxNumber = 10;
const maxMbFileSize = 5 * 1024 * 1024; // 5Mb

class Example extends React.Component {
  onChange = (imageList) => {
    // data for submit
    console.log(imageList);
  };
  onError = (errors, files) => {
    console.log(errors, files);
  };

  render() {
    return (
      <ImageUploading
        onChange={this.onChange}
        maxNumber={maxNumber}
        multiple
        maxFileSize={maxMbFileSize}
        acceptType={["jpg", "gif", "png"]}
        onError={this.onError}
      >
        {({ imageList, onImageUpload, onImageRemoveAll }) => (
          // write your building UI
          <div>
            <button onClick={onImageUpload}>Upload images</button>
            <button onClick={onImageRemoveAll}>Remove all images</button>

            {imageList.map((image) => (
              <div key={image.key}>
                <img src={image.dataURL} />
                <button onClick={image.onUpdate}>Update</button>
                <button onClick={image.onRemove}>Remove</button>
              </div>
            ))}
          </div>
        )}
      </ImageUploading>
    );
  }
}
```

### Validate

```
...
  {({ imageList, onImageUpload, onImageRemoveAll, errors }) => (
    <div>
      {errors.maxNumber && <span>Number of selected images exceed maxNumber</span>}
      {errors.acceptType && <span>Your selected file type is not allow</span>}
      {errors.maxFileSize && <span>Selected file size exceed maxFileSize</span>}
      {errors.resolution && <span>Selected file is not match your desired resolution</span>}
    </div>
  )}
...
```

### Resolution

- "absolute": resolutionWidth and resolutionHeight is equal with selected image absolutely
- "ratio": resolutionWidth/resolutionHeight ratio is equal with width/height ratio of selected image
- "less: image width must less than resolutionWidth and image height must less than resolutionHeight
- "more: image width must more than resolutionWidth and image height must more than resolutionHeight

## Props

| parameter        | type     | options                                   | default | description                                                                    |
| ---------------- | -------- | ----------------------------------------- | ------- | ------------------------------------------------------------------------------ |
| multiple         | boolean  |                                           | false   | Set true for multiple choose                                                   |
| maxNumber        | number   |                                           | 1000    | Number of images user can select if mode = "multiple"                          |
| onChange         | function |                                           |         | Called every update                                                            |
| onError          | function | (errors, files) => void                   |         | Called if have error on validate each update                                   |
| defaultValue     | array    | \[\{dataURL: \.\.\. \}, \.\.\.\]          |         | Init data                                                                      |
| acceptType       | array    | \['jpg', 'gif', 'png'\]                   | \[\]    | Supported image extension                                                      |
| maxFileSize      | number   |                                           |         | Max image size\(Byte\) \(will use in the image validation\)                    |
| resolutionType   | string   | "absolute" \| "less" \| "more" \| "ratio" |         | Using for validate image with your width \- height resolution that you provide |
| resolutionWidth  | number   | > 0                                       |         |                                                                                |
| resolutionHeight | number   | > 0                                       |         |                                                                                |

## Exported options

| parameter                 | type     | description                                                               |
| ------------------------- | -------- | ------------------------------------------------------------------------- |
| imageList                 | array    | List of images for render. Each item in imageList has some options below. |
| imageList[index].key      | string   | Generate filename                                                         |
| imageList[index].dataURL  | string   | Url image or base64                                                       |
| imageList[index].onUpdate | function | Call function for replace a new image on current position                 |
| imageList[index].onRemove | function | Call function for remove current image                                    |
| onImageUpload             | function | Call for upload new image(s)                                              |
| onImageRemoveAll          | function | Call for remove all image(s)                                              |
| errors                    | object   | Export type of validation                                                 |

## License

MIT © [](https://github.com/)

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