Using customRequest in Ant design file upload

Question

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".

HTML

<Upload
  accept="image/*"
  customRequest={uploadImage}
  onChange={handleOnChange}
  listType="picture-card"
  fileList={defaultListOfFiles}
  className="image-upload-grid"
>
  {defaultListOfFiles.length >= 8 ? null : <div>Upload Button</div>}
</Upload>

OnChangeHandler

const handleOnChange = ({ file, fileList, event }) => {
  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'}]
};

CustomRequest handler

const uploadImage = options => {

  const { onSuccess, onError, file, onProgress } = options;

  const fmData = new FormData();
  const config = {
    headers: { "content-type": "multipart/form-data" },
    onUploadProgress: event => {
      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 => {
      onSuccess(file);
      console.log(res);
    })
    .catch(err=>{
      const error = new Error('Some error');
      onError({event:error});
    });
}

Answer 1

antd Upload uses rc-upload under the hood. onProgress accepts only one argument. I have also used antd Progress for an alternative way of showing progress. Read more about customRequest.

JSX

import { Upload, Progress } from "antd";

const App = () => {
  const [defaultFileList, setDefaultFileList] = useState([]);
  const [progress, setProgress] = useState(0);

  const uploadImage = async options => {
    const { onSuccess, onError, file, onProgress } = options;

    const fmData = new FormData();
    const config = {
      headers: { "content-type": "multipart/form-data" },
      onUploadProgress: event => {
        const percent = Math.floor((event.loaded / event.total) * 100);
        setProgress(percent);
        if (percent === 100) {
          setTimeout(() => setProgress(0), 1000);
        }
        onProgress({ percent: (event.loaded / event.total) * 100 });
      }
    };
    fmData.append("image", file);
    try {
      const res = await axios.post(
        "https://jsonplaceholder.typicode.com/posts",
        fmData,
        config
      );

      onSuccess("Ok");
      console.log("server res: ", res);
    } catch (err) {
      console.log("Eroor: ", err);
      const error = new Error("Some error");
      onError({ err });
    }
  };

  const handleOnChange = ({ file, fileList, event }) => {
    // 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'}]
  };

  return (
    <div class="container">
      <Upload
        accept="image/*"
        customRequest={uploadImage}
        onChange={handleOnChange}
        listType="picture-card"
        defaultFileList={defaultFileList}
        className="image-upload-grid"
      >
        {defaultFileList.length >= 1 ? null : <div>Upload Button</div>}
      </Upload>
      {progress > 0 ? <Progress percent={progress} /> : null}
    </div>
  );
};

Here is a demo