Multiple File upload and formData request

Ask us anything How do I?
1

How to build the correct request for multiple file upload and setting dynamic formData?

hey, I am working on file upload, and i would like to upload multiple files. i am having issues while trying to setup the request to upload the files

image
image789×548 58.4 KB

I am using the basic file upload component. And i would like to pass al the selected input files for the upload. the Backend API expects the documents to be sent as POST with content type: ‘multipart/form-data’ with ‘files’ as key and files.

uploading a single object from the array works fine. Also i would like to know how can I build my own formData in the JavaScript and use it in the http request.

2

const formData = new FormData();
files.forEach((file) => formData.append(‘files’, file)); // where files: File

how can i bind such formData to the ‘fields’ in the HTTP Request when using mltipart/form-data

3

You can select “Raw body”, create it with JS, and set “multipart/form-data”

const generateRawBody = (variables) => {
    const formData = new FormData();
    const file = variables['ef9d-486f-9105-c0003adf014f-value']; // Single File

    formData.append('file', file); // Add file
    formData.append('sample_param_1', 'some_param'); // add any other params

    const rawBody = {};
    for (const [key, value] of formData.entries()) {
        rawBody[key] = value; // create rawBody
    }

    return rawBody;
};
const variables = {
    'ef9d-486f-9105-c0003adf014f-value': new File(["example content"], "example.csv", { type: "text/csv" })
};

const rawBody = generateRawBody(variables);
return rawBody;