Have ideas to improve npm?Join in the discussion! »

    @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

    Keywords

    none

    Install

    npm i @canner/image-upload

    DownloadsWeekly Downloads

    181

    Version

    0.14.1

    License

    Apache-2.0

    Unpacked Size

    80.6 kB

    Total Files

    34

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar