title: Upload an image using ant design in react js
body: <p>I have a simple application where user should upload its image. After uploading the image, and clicking on <code>get data from upload</code> button, the user should see the result in <code>console.log(&quot;Received values of form: &quot;, values);</code> Now, the result appears but in form of an array of items. <br>
  What i want to achieve is, to get just the last uploaded image there, and in the same time on front end i want to see just one square with image, but now if i upload 3 images, i get 3 squares. <br>ps: for me is obligatory to get the <code>thumbUrl</code> after saving. There is base64 data  of image.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { useState } from "react";
  import ReactDOM from "react-dom";
  import "antd/dist/antd.css";
  import "./index.css";
  import {
    Form,
    Select,
    InputNumber,
    Switch,
    Radio,
    Slider,
    Button,
    Upload,
    Rate,
    Checkbox,
    Row,
    Col
  } from "antd";
  import { UploadOutlined, InboxOutlined } from "@ant-design/icons";
  
  const { Option } = Select;
  const formItemLayout = {
    labelCol: {
      span: 6
    },
    wrapperCol: {
      span: 14
    }
  };
  
  const normFile = (e) =&gt; {
    console.log("Upload event:", e);
  
    if (Array.isArray(e)) {
      return e;
    }
  
    return e &amp;&amp; e.fileList;
  };
  
  const Demo = () =&gt; {
    const onFinish = (values) =&gt; {
      console.log("Received values of form: ", values);
    };
    const [state, setState] = useState({
      loading: false
    });
  
    function getBase64(img, callback) {
      const reader = new FileReader();
      reader.addEventListener("load", () =&gt; callback(reader.result));
      reader.readAsDataURL(img);
    }
    const handleChange = (info) =&gt; {
      let fileList = [...info.fileList];
  
      if (info.file.status === "uploading") {
        setState({ loading: true });
        return;
      }
      if (info.file.status === "done") {
        // Get this url from response in real world.
        getBase64(info.file.originFileObj, (imageUrl) =&gt;
          setState({
            imageUrl,
            loading: false
          })
        );
      }
    };
  
    function beforeUpload(file) {
      const isJpgOrPng = file.type === "image/jpeg" || file.type === "image/png";
      if (!isJpgOrPng) {
        console.error("You can only upload JPG/PNG file!");
      }
      const isLt2M = file.size / 1024 / 1024 &lt; 2;
      if (!isLt2M) {
        console.error("Image must smaller than 2MB!");
      }
      return isJpgOrPng &amp;&amp; isLt2M;
    }
  
    const uploadButton = (
      &lt;div&gt;
        &lt;div className="ant-upload-text"&gt;Upload img&lt;/div&gt;
      &lt;/div&gt;
    );
    const { imageUrl } = state;
    return (
      &lt;Form
        name="validate_other"
        {...formItemLayout}
        onFinish={onFinish}
        initialValues={{
          "input-number": 3,
          "checkbox-group": ["A", "B"],
          rate: 3.5
        }}
      &gt;
        &lt;Form.Item
          name="upload"
          label="Upload"
          valuePropName="fileList"
          getValueFromEvent={normFile}
        &gt;
          &lt;Upload
            listType="picture-card"
            className="avatar-uploader"
            showUploadList={true}
            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
            beforeUpload={beforeUpload}
            onChange={handleChange}
          &gt;
            {imageUrl ? (
              &lt;img src={imageUrl} alt="avatar" style={{ width: "100%" }} /&gt;
            ) : (
              uploadButton
            )}
          &lt;/Upload&gt;
        &lt;/Form.Item&gt;
  
        &lt;Form.Item
          wrapperCol={{
            span: 12,
            offset: 6
          }}
        &gt;
          &lt;Button type="primary" htmlType="submit"&gt;
            get data from upload
          &lt;/Button&gt;
        &lt;/Form.Item&gt;
      &lt;/Form&gt;
    );
  };
  
  ReactDOM.render(&lt;Demo /&gt;, document.getElementById("container"));</code></pre>
  </div>
  </div>
  </p>
  <p>Question: How to achieve what i described above?<br>demo: <a href="https://codesandbox.io/s/currying-pine-hq412?file=/index.js:0-2985" rel="nofollow noreferrer">https://codesandbox.io/s/currying-pine-hq412?file=/index.js:0-2985</a></p>