@canner/image-upload

0.14.1 • Public • Published

image-upload NPM version Dependency Status

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

preview

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:

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

Readme

Keywords

none

Package Sidebar

Install

npm i @canner/image-upload

Weekly Downloads

67

Version

0.14.1

License

Apache-2.0

Unpacked Size

80.6 kB

Total Files

34

Last publish

Collaborators

  • wwwy3y3
  • cannerbot