action function is required with antd upload control, but I dont need it action function is required with antd upload control, but I dont need it reactjs reactjs

action function is required with antd upload control, but I dont need it


TL;DR

Override <Upload/> default upload AJAX implementation with a simulated successful upload.

Solution Demo:
Edit antd upload component as file selector

Full Answer

It seems that you are trying to use andt's <Upload/> component simply as file selector, due to the fact that you append the file to formData by yourself. The reason for never hitting the point where status === "done" is because the file is not really uploaded to anywhere.
Thus, you don't need the file to be uploaded automatically like it should OOB.
All you need is that the onChange will send you the selected file and you can save it somewhere in the state tree.
<Upload/> renders another component (rc-upload) as its child which handles the actual AJAX upload.You can override this behaviour by passing a customRequest prop to <Upload/>(which will be passed to rc-upload component).

You can see here which options are passed to the request function.Here is an implementation of a dummy request function:

const dummyRequest = ({ file, onSuccess }) => {  setTimeout(() => {    onSuccess("ok");  }, 0);};

Then you can pass it to <Upload customRequest={dummyRequest}/>
onChange will still be triggered, but this time with the "done" status, since the dummy request function simulates a flow of successful upload.


According to the official documentation Upload manually:

Upload files manually after beforeUpload returns false.

beforeUpload(file) {    const isJPG = file.type === 'image/jpeg';    if (!isJPG) {      message.error('You can only upload JPG file!');    }    return false;}


Extending to @Quincy's answer, you can also use shorthand on component something like this,

<Upload beforeUpload={() => false} />