How to stop React Ant Design Upload component from posting files automatically

Question

I have this simple file upload button that I got from antd ant design documentation:

<Upload>
  <Button
    icon={<UploadOutlined />}
    className="upload-btn"
  >
     Upload a file
  </Button>
</Upload>

Every time I upload a file I get this error in the console log:

I don't want it to make a post request when I upload the file, I have a submit button for that.

Answer 1

You can do it by returning false from beforeUpload prop, like this:

<Upload beforeUpload={()=> {
    /* update state here */
    return false; }}>
    <Button icon={<UploadOutlined />}>Select File</Button>
</Upload>

obviously in this manner you have to define a state, and store files in the state to send it to server manually. Here is an example to implement this logic.