# Multiple File upload and formData request

**URL:** <https://community.weweb.io/t/multiple-file-upload-and-formdata-request/10228>\
**Category:** How do I?\
**Tags:** file-upload\
**Created:** [August 13, 2024, 4:30pm UTC](https://community.weweb.io/t/multiple-file-upload-and-formdata-request/10228 "2024-08-13T16:30:07Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![suraj](https://avatars.discourse-cdn.com/v4/letter/s/ecccb3/32.png) [@suraj](https://community.weweb.io/u/suraj)\
**Post date:** [August 13, 2024, 4:30pm UTC](https://community.weweb.io/t/multiple-file-upload-and-formdata-request/10228/1 "2024-08-13T16:30:07Z")

</div>

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](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/8/8b2b428f85c46fe8efe3b14d5afd85bdd7d9c4a0.png)

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.

---

<div class="post-metadata">

**Author:** ![suraj](https://avatars.discourse-cdn.com/v4/letter/s/ecccb3/32.png) [@suraj](https://community.weweb.io/u/suraj)\
**Post date:** [August 13, 2024, 4:40pm UTC](https://community.weweb.io/t/multiple-file-upload-and-formdata-request/10228/2 "2024-08-13T16:40:05Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![George](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/george/32/1661_2.png) [@George](https://community.weweb.io/u/George)\
**Post date:** [January 23, 2025, 8:48am UTC](https://community.weweb.io/t/multiple-file-upload-and-formdata-request/10228/3 "2025-01-23T08:48:00Z")

</div>

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

```auto
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;

```