image-upload

An image-uploader based on ant design (https://ant.design/)

Installation

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

Usage

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)
• zh_tw (see 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.

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