# @canner/image-upload

> image uploader

Latest version **0.14.1** (published 2018-12-16) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @canner/image-upload
pnpm add @canner/image-upload
yarn add @canner/image-upload
bun add @canner/image-upload
```

## 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.14.1 |
| Published | 2018-12-16 |
| First published | 2016-12-11 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 78.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 8 |
| Author | Canner |
| Maintainers | abz53378, chilijung, wwwy3y3 |

## Links

- npm: https://www.npmjs.com/package/@canner/image-upload
- Repository: https://github.com/Canner/image-upload
- Homepage: https://github.com/Canner/image-upload#readme
- Issues: https://github.com/Canner/image-upload/issues
- npm.io page: https://npm.io/package/@canner/image-upload

## Dependencies (3)

- [react-intl](https://npm.io/package/react-intl.md) ^2.4.0
- [styled-components](https://npm.io/package/styled-components.md) ^3.2.0
- [react-loading-image](https://npm.io/package/react-loading-image.md) ^0.5.0

## Recent versions

- 0.14.1 (latest) — 2018-12-16
- 0.14.0 — 2018-12-15
- 0.13.4 — 2018-09-21
- 0.13.3 — 2018-09-21
- 0.13.2 — 2018-09-19
- 0.13.1 — 2018-09-06
- 0.13.0 — 2018-09-06
- 0.12.0 — 2018-07-12
- 0.11.2 — 2018-07-11
- 0.11.1 — 2018-07-11
- 0.11.0 — 2018-04-13
- 0.10.0 — 2018-03-15
- 0.9.4 — 2018-03-08
- 0.9.3 — 2018-03-08
- 0.9.2 — 2018-03-08
- … 20 more at https://npm.io/package/@canner/image-upload/versions

## README

# image-upload [![NPM version][npm-image]][npm-url]  [![Dependency Status][daviddm-image]][daviddm-url]
> An image-uploader based on ant design (https://ant.design/)

![preview](./docs/image-upload.gif)

## Installation

```sh
$ npm install --save @canner/image-upload
```

## Usage

```js
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import ImageUpload from '../src/index';

class Demo extends Component {
  constructor(props) {
    super(props);
    this.showPopup = this.showPopup.bind(this);
    this.closePopup = this.closePopup.bind(this);

    this.state = {
      popup: false
    };
  }

  showPopup() {
    this.setState({
      popup: true
    });
  }

  closePopup() {
    this.setState({
      popup: false
    });
  }

  onChange(value) {
    console.log(value)
  }

  render() {

    return (
      <div>
        <button onClick={this.showPopup}>show edit</button>
        <ImageUpload
          closeEditPopup={this.closePopup}
          editPopup={this.state.popup}
          onChange={this.onChange}
          multiple={true}
        />
      </div>
    );
  }
}

ReactDOM.render(
  <Demo/>
, document.getElementById('root'));

```

## Props

| Name         | Type    | Default | Description |
| ------------ | ------- | ------- | ----------- |
| locale | string | 'en' | Set locale |
| localeMessages | localeMessages: {[string]: string} | see `src/locale/en.js` | Locale messages |
| onChange | `(value: string \| Array<string>) => void` | null | called every change, if `multiple` to true `value` is an array. |
| closeEditPopup | `() => void` | null | called when close |
| editPopup | boolean | false | should popup show or not |
| multiple | boolean | false | allow upload multiple images or not. |
| galleryConfig | `Array<{name: string, gallery: Array<{ url: string, name: string }>}> \| null` | default `null` see `src/config.js` for demo settings | Setup albums for users to choose, in `Gallery` tab, disable if set to `null`. |
| serviceConfig | depends on services | undefined | pass image configurations generate from: https://github.com/Canner/image-service-config |

## Support i18n

This package support i18n, currently support languages:

- en (see [src/locale/en.js](./src/locale/en.js))
- zh_tw (see [src/locale/zh_tw.js](./src/locale/zh_tw.js))
- Submit your language! PRs are welcome!

**Usage:** import specific locale messages from `lib` folder, and pass it into `localeMessages` props.

```js
import zhTWLocale from '@canner/image-upload/lib/locale/zh_tw';

<ImageUpload
  locale="zh"
  localeMessages={zhTWLocale}
  {...otherProps}
/>
```


## Start example server

```
npm start
```

## License

Apache-2.0 © [Canner](https://www.canner.io)


[npm-image]: https://badge.fury.io/js/%40canner%2Fimage-upload.svg
[npm-url]: https://npmjs.org/package/@canner/image-upload
[travis-image]: https://travis-ci.org/Canner/image-upload.svg?branch=master
[travis-url]: https://travis-ci.org/Canner/image-upload
[daviddm-image]: https://david-dm.org/Canner/image-upload.svg?theme=shields.io
[daviddm-url]: https://david-dm.org/Canner/image-upload

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