title: Using customRequest in Ant design file upload
body: <p>I am using Axios to handle the file upload. I am facing a problem showing the upload progress of the file upload. The file upload view I am using is "picture-card".</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;Upload
    accept="image/*"
    customRequest={uploadImage}
    onChange={handleOnChange}
    listType="picture-card"
    fileList={defaultListOfFiles}
    className="image-upload-grid"
  &gt;
    {defaultListOfFiles.length &gt;= 8 ? null : &lt;div&gt;Upload Button&lt;/div&gt;}
  &lt;/Upload&gt;
  </code></pre>
  
  <p>OnChangeHandler</p>
  
  <pre><code>const handleOnChange = ({ file, fileList, event }) =&gt; {
    console.log(file, fileList, event);
    //Using Hooks to update the state to the current filelist
    setDefaultFileList(fileList);
    //filelist - [{uid: "-1",url:'Some url to image'}]
  };
  </code></pre>
  
  <p>CustomRequest handler</p>
  
  <pre><code>const uploadImage = options =&gt; {
  
    const { onSuccess, onError, file, onProgress } = options;
  
    const fmData = new FormData();
    const config = {
      headers: { "content-type": "multipart/form-data" },
      onUploadProgress: event =&gt; {
        console.log((event.loaded / event.total) * 100);
        onProgress({ percent: (event.loaded / event.total) * 100 },file);
      }
    };
    fmData.append("image", file);
    axios
      .post("http://localhost:4000/upload", fmData, config)
      .then(res =&gt; {
        onSuccess(file);
        console.log(res);
      })
      .catch(err=&gt;{
        const error = new Error('Some error');
        onError({event:error});
      });
  }
  </code></pre>