Custom Image upload component using Ant Design (https://ant.design)

ImageUpload.js

import React from "react";
import { Upload, Icon, Modal } from "antd";
import {isEqual} from "lodash";

class ImageUpload extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			fileList: [],
			previewVisible: false,
			previewImage: '',
		};
	}
	
	uploadToS3 = async ({action, data, file, filename, headers, onError, onProgress, onSuccess, withCredentials}) => {
		let random_string = Math.random().toString(36).substr(2, 10);
		let file = new File([file], `${random_string}${file.name}`, { type: file.type });
		//Upload this file to you S3 server
	};
	
	componentDidMount() {
		this.updateFileList();
	}
	
	componentDidUpdate(prevProps) {
		if(!isEqual(prevProps.value, this.props.value)){
			this.updateFileList();
		}
	}
	
	updateFileList = () => {
		let fileList;
		if (this.props.multiple) {
			fileList = this.props.value ? this.props.value.map((v, i) => ({
				uid: i,
				name: `image-${i}`,
				response: v,
				url: v,
			})) : [];
		} else {
			fileList = this.props.value ? [{
				uid: 0,
				name: 'Image',
				response: this.props.value,
				url: this.props.value,
			}] : [];
		}
		this.setState({ fileList });
	};
	
	handleChange = ({ file, fileList }) => {
		if (fileList.length) {
			let data = fileList.map(img => img.response);
			this.props.onSuccess(data);
		} else {
			this.props.multiple ? this.props.onSuccess([]) : this.props.onSuccess(['']);
		}
		this.setState({ fileList });
	};
	
	handlePreview = (file) => {
		this.setState({
			previewImage: file.response ,
			previewVisible: true,
		});
	};
	
	handleCancel = () => {
		this.setState({
			previewVisible: false,
			previewImage: '',
		});
	};
	
	render() {
		const { fileList } = this.state;
		return (
			<React.Fragment>
        {this.props.multiple ? (
          <Upload
            accept={this.props.accept || ""}
            className={this.props.className}
            customRequest={this.uploadToS3}
            listType="picture-card"
            onPreview={this.handlePreview}
            fileList={fileList}
            onChange={this.handleChange}
            multiple={this.props.multiple}
          >
            <div>
              <Icon type="plus" />
              <div className="ant-upload-text">Upload</div>
            </div>
          </Upload>
        ) : (
          <Upload
            accept={this.props.accept || ""}
            className={this.props.className}
            customRequest={this.uploadToS3}
            listType="picture-card"
            onPreview={this.handlePreview}
            fileList={fileList}
            onChange={this.handleChange}
            multiple={this.props.multiple}
          >
            {fileList.length === 0 ? (
              <div>
                <Icon type="plus" />
                <div className="ant-upload-text">Upload</div>
              </div>
            ) : null}
          </Upload>
        )}
				<Modal visible={this.state.previewVisible} footer={null} onCancel={this.handleCancel}>
					<img alt="example" style={{ width: '100%' }} src={this.state.previewImage} />
				</Modal>
			</React.Fragment>
		);
	}
}

export default ImageUpload;

index.js

import React from "react"
import ReactDOM from "react-dom";
import ImageUpload from "./ImageUpload";

class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      data: []
    };
  }
  
  onSuccess = (data) => {
    console.log(data);
  };

  onError = (error) => {
    console.log(error)
  }
  
  render() {
    return(
      <ImageUpload
        multiple={true}
        accept=".png, .jpg, .jpeg, .tiff, .tif, .bmp, .webp"
        value={values.gallery}
        onSuccess={this.onSuccess}
        onError={this.onError}
      />
    );
  }
}

ReactDOM.render(<App/>, document.getElementById("root"));