estateagents-admin-manager/src/components/XForm/ImageUpload.jsx

import React from 'react';
import { Upload, Icon, message } from 'antd';
import './style.less';
import { uploaderProps } from '../../utils/upload';



class ImageUpload extends React.Component {
  state = {
    loading: false,
    imageUrl: undefined,
  };

  handleChange = info => {
    if (info.file.status === "uploading") {
      this.setState({ loading: true });
      return;
    }

    if (info.file.status === "done") {
      this.setState({
        loading: false,
      })

      if (info.file.response && info.file.response.url) {
        this.setState({
          imageUrl: info.file.response.thumbUrl,
        });

        if (typeof this.props.onChange === 'function') {
          this.props.onChange(info.file.response.url);
        }
      }
    }
  };

  render() {
    const uploadButton = (
      <div>
        <Icon style={{ fontSize: '2em', color: '#aaa' }} type={this.state.loading ? "loading" : "plus"} />
      </div>
    );

    const value = this.props.value;

    return (
      <Upload
        listType="picture-card"
        className="avatar-uploader"
        showUploadList={false}
        beforeUpload={this.props.beforeUpload}
        onChange={this.handleChange}

        {...uploaderProps}
      >
        {(this.state.imageUrl || value) ? (
          <img src={this.state.imageUrl || value} alt="avatar" style={{ width: "100%" }} />
        ) : (
            uploadButton
          )}
      </Upload>
    );
  }
}

export default ImageUpload;