react-upload

Upload component for react.

installation

npm install -S @jswork/react-upload

properties

| Name | Type | Required | Default | Description | | --------- | ------ | -------- | ------- | -------------------------------------- | | className | string | false | - | The extended className for component. | | name | string | false | 'file' | Name for upload. | | multiple | bool | false | false | If is multiple. | | maxSize | number | false | 1e10 | The max size of the file. | | maxCount | number | false | 1e3 | Max size files count. | | onChange | func | false | noop | The change handler. | | onError | func | false | noop | The error handle when validate failed. |

usage

1. import css

@import "~@jswork/react-upload/dist/style.css";

// or use sass
@import "~@jswork/react-upload/dist/style.scss";

// customize your styles:
$react-upload-options: ()

2. import js

import ReactDemokit from '@jswork/react-demokit';
import React from 'react';
import ReactDOM from 'react-dom';
import ReactUpload from '@jswork/react-upload';
import './assets/style.scss';

const urls = [
  'https://randomuser.me/api/portraits/lego/1.jpg',
  'https://randomuser.me/api/portraits/lego/2.jpg',
  'https://randomuser.me/api/portraits/lego/3.jpg',
  'https://randomuser.me/api/portraits/lego/4.jpg',
  'https://randomuser.me/api/portraits/lego/5.jpg',
  'https://randomuser.me/api/portraits/lego/6.jpg',
  'https://randomuser.me/api/portraits/lego/7.jpg'
];

class App extends React.Component {
  state = {
    blobs: []
  };

  componentDidMount() {
    setTimeout(() => {
      this.setState({ blobs: urls });
    }, 1200);
  }

  handleChange = (e) => {
    const blobs = e.target.value.map((item) => item.url);
    this.setState({ blobs });
  };

  handleError = (e) => {
    console.log('err:', e.target.value);
  };

  render() {
    const { blobs } = this.state;
    return (
      <ReactDemokit className="p-3 app-container" url="https://github.com/afeiship/react-upload">
        <ReactUpload
          maxCount={10}
          maxSize={1000000}
          multiple={true}
          onChange={this.handleChange}
          onError={this.handleError}
        />
        <div className="pic-list">
          {blobs.map((item, index) => {
            return <img key={index} src={item} />;
          })}
        </div>
      </ReactDemokit>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

documentation

• https://afeiship.github.io/react-upload/

license

Code released under the MIT license.