https://github.com/cannercms/image-upload

Based on antd image uploader
https://github.com/cannercms/image-upload

ant-design antd gallery image image-processing image-upload

Last synced: 2 months ago
JSON representation

Based on antd image uploader

• Host: GitHub
• URL: https://github.com/cannercms/image-upload
• Owner: CannerCMS
• License: other
• Created: 2016-12-11T08:51:19.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2018-12-16T15:17:36.000Z (about 6 years ago)
• Last Synced: 2024-11-05T01:51:36.579Z (3 months ago)
• Topics: ant-design, antd, gallery, image, image-processing, image-upload
• Language: JavaScript
• Homepage: https://canner.github.io/image-upload/
• Size: 2.92 MB
• Stars: 8
• Watchers: 3
• Forks: 5
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

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 (

      


        show edit

        

      

    );

  }

}


ReactDOM.render(

  

, 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) => 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';

```

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