Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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

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:
enter image description here

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

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

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.

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading