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.

Wessling

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.

Retrogressive

Thank you so much, it works perfectly. Yeah, I defined the state and the submit function and all, that's just an extracted code. – Wessling

Answer 2

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.

Simonnesimonpure

If you use customRequest you'll still see loading icon in File List, to disable loading icon, pass a custom icon renderer function with iconRender prop. For this reason beforeUpload solution was better for me. – Woundwort

Answer 3

returning false from beforeUpload() should do.

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

Unpolite