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.

score 8 · Accepted Answer · answered Dec 21 '21 at 09:36

8

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.

answered Dec 21 '21 at 09:36

Saeed Shamloo

6,199
1
7
18

Thank you so much, it works perfectly. Yeah, I defined the state and the submit function and all, that's just an extracted code. – Ala Ben Aicha Dec 21 '21 at 09:40

score 1 · Answer 2 · answered Mar 14 '23 at 06:03

I think it might be late but still. If you don't want your beforeUpload API to always return false as it is for validation of files.

You can simply do the following:

  <Upload 
    customRequest={({ onSuccess }) => 
      onSuccess("ok")
  }>
     <Button icon={<UploadOutlined />}>Select File</Button>
  </Upload>

Providing customRequest will stop automatic File upload.

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

2 Answers2