@canner/image-upload

image uploader

Stats

StarsIssuesVersionUpdatedCreatedSize
@canner/image-upload
910.14.13 years ago5 years agoMinified + gzip package size for @canner/image-upload in KB

Readme

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

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.