title: How to get the value of Upload from form.item in Antd?
body: <p>Even though the file is uploaded antd Form.item rules throws error. Which mean it's not getting the value from Upload to the form.item how should i solve this error. Note im using antd latest version 4.x in which getFieldDecorator has been deprecated. And i also want to upload file manually.</p>
  <pre><code>import React, { useState, useEffect } from 'react';
  import { Form, Input, Button, Alert, Upload } from 'antd';
  import { UserOutlined, LockOutlined, UploadOutlined } from '@ant-design/icons';
  
  import styles from './test1.module.css';
  const Test1 = () =&gt; {
    const [form] = Form.useForm();
    const [state, setState] = useState({
      fileList: [
        {
          thumbUrl:
            'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        },
      ],
    });
  
    const handleChange = (info) =&gt; {
      console.log(info);
      let fileList = [...info.fileList];
  
      // 1. Limit the number of uploaded files
      // Only to show two recent uploaded files, and old ones will be replaced by the new
      fileList = fileList.slice(-1);
      setState({ fileList: fileList });
    };
  
    const onFinish = (values) =&gt; {
      console.log(form.getFieldsValue());
    };
    return (
      &lt;div className={styles.login_page}&gt;
        &lt;Form
          name='normal_login'
          className={styles.form}
          form={form}
          onFinish={onFinish}
        &gt;
          &lt;Form.Item
            name='email'
            rules={[
              {
                required: true,
                message: 'Please input your Email!',
              },
            ]}
          &gt;
            &lt;Input
              prefix={&lt;UserOutlined className='site-form-item-icon' /&gt;}
              placeholder='Email'
            /&gt;
          &lt;/Form.Item&gt;
          &lt;Form.Item
            name='password'
            rules={[
              {
                required: true,
                message: 'Please input your Password!',
              },
            ]}
          &gt;
            &lt;Input
              prefix={&lt;LockOutlined className='site-form-item-icon' /&gt;}
              type='password'
              placeholder='Password'
            /&gt;
          &lt;/Form.Item&gt;
          &lt;Form.Item
            name='image'
            rules={[
              {
                required: true,
                message: 'input Image',
              },
            ]}
          &gt;
            &lt;Upload
              beforeUpload={(file) =&gt; {
                // console.log(file);
                return false;
              }}
              onChange={handleChange}
              multiple={false}
              listType='picture'
              defaultFileList={state.fileList}
            &gt;
              &lt;Button icon={&lt;UploadOutlined /&gt;}&gt;Click to Upload&lt;/Button&gt;
            &lt;/Upload&gt;
          &lt;/Form.Item&gt;
  
          &lt;Form.Item&gt;
            &lt;Button type='primary' htmlType='submit'&gt;
              Log in
            &lt;/Button&gt;
          &lt;/Form.Item&gt;
        &lt;/Form&gt;
      &lt;/div&gt;
    );
  };
  export default Test1;
  </code></pre>
  <p>Is there any way i can bind the onChange event listener of Upload with form.Item</p>