How to send metadata with ANTD upload component in the request body?

Question

I have an antd upload component that is uploading the a file to the backend ( expressjs). I want to send some data in the upload post request. There is a data field in the upload component, according to antd documentation the data field is

Uploading extra params or function which can return uploading extra params

So I thought that's what i was looking for, this is my code

 <Upload
        action={config.backend.url + "/file/upload"}
        data={{test:"test"}}
        listType="picture-card"
        fileList={fileList}
        accept={acceptedTypes.join()}
        {...others}
      >
      </Upload>

Apparently this doesnt work because in the backend, the request.body is empty. I am not sure what im doing wrong, the file is uploaded sucessfully but i m not able to send some metadata in the body of the request. What am i doing wrong and how can i send some metadata alongside the file upload ?

Thank you so much

Answer 1

It is possible to use custom request like @NoNam4 said, But Antd upload component has data props and you can use it pass params.

The problem is that I was using express body parser which does not parse form-data and does not handle multipart bodies.

So I changed this

app.use(express.urlencoded());
app.use(express.json());

to this

import multer from "multer"

app.use(express.urlencoded());
app.use(express.json());
app.use(multer().array());

Basically multer is handling the form-data type and parsing it to req.body