antd fileupload on form submit

FileUpload.js

import React, { Component } from 'react'
import { Upload, Form, Icon } from "antd";
const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 5 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 18 },
    md: { span: 16 },
    lg: { span: 12 },
  },
};

String.prototype.ucFirst = function () {
  return this.charAt(0).toUpperCase() + this.slice(1);
}
export default class FileUpload extends Component {
  constructor(props) {
    super(props);
    this.state = {
      files: props.fileList || [],
      fileList: []
    }
  }
  dummyRequest = ({ file, onSuccess }, multiple, limit) => {

    const reader = new FileReader();
    reader.onloadend = () => {
      this.setState({
        files: [
          ...this.state["files"],
          {
            uid: (new Date()).getMilliseconds(),
            name: file.name,
            status: 'done',
            url: reader.result,
            file: file,
          }
        ].slice(0, multiple ? ( limit > -1 ? limit :  this.state.files.length + 1) : 1 )
      })
    }
    if (file) {
      reader.readAsDataURL(file);
    }
    setTimeout(() => {
      onSuccess("ok");
    }, 0);
  };

  normFile = (element , multiple , limit) => {


    if(!multiple) {
      return element.file ;
    }

    if (element.file.status === "removed") {
      this.setState({
        fileList: this.state.fileList.filter((v) => "file" in element.file && v.uid != element.file.file.uid),
        files: this.state.files.filter((v) => v.status !== 'removed')
      });
    } else {
      this.setState({
        fileList: [...this.state.fileList, element.file]
      });
    }


    return this.state.fileList.slice(0 , ( limit > -1 ? limit :  this.state.fileList.length + 1));
  }
  render() {
    const { multiple = true, element, required = true, accept = "image/*", decorator, limit = -1 } = this.props;
    const label = element.split("_").join(" ").ucFirst();
    return (
      <Form.Item {...formItemLayout} label={label} required={required} id={element} >{
        decorator(element, {
          valuePropName: element,
          getValueFromEvent: (f) => this.normFile(f , multiple , limit ) ,
        })(
          <Upload multiple={multiple}
            accept={accept}
            listType="picture-card"
            fileList={this.state.files}
            customRequest={(f) => this.dummyRequest(f, multiple, limit)}
          >
            <div>
              <Icon type="plus" />
              <div className="ant-upload-text">Upload</div>
            </div>
          </Upload>
        )
      }</Form.Item>
    )
  }
}

This looks very nice. Do you have it embedded in codepen / stackblitz so I can play with it?

How should we pass the decorator into this component?

Hi Nxtra :) ,
just send decorator as prop , <FileUpload fileList={this.state.list} element='images' decorator={getFieldDecorator} />