46
Views
2
Comments
How to use Multipart/formdata with Fetch in javascript

Hi 

I want to use javascript to call the REST API.

This specific REST API expects the data in multipart formdata.

I have added below code in my javascript node. I am always getting "Bad Server Response ". Am I missing anything.

function postData(url, data ) {


    var formData = new FormData();


    formData.append("Files", data);

    

    // Default options are marked with *

  const response =  fetch(url, {

    method: 'POST', // *GET, POST, PUT, DELETE, etc.

    mode: 'no-cors', // no-cors, *cors, same-origin

    //cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached

    //credentials: 'same-origin', // include, *same-origin, omit

    //redirect: 'follow', // manual, *follow, error

    referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url

    body: formData // body data type must match "Content-Type" header

  })

  .then((result) => {

    if (result.status != 200) {  console.log(result.status); throw new Error("Bad Server Response"); }

    return result.text();

  })

 

  // (D) SERVER RESPONSE

  .then((response) => {

    console.log(response);

  })

 

  // (E) HANDLE ERRORS - OPTIONAL

  .catch((error) => { console.log(error); });

 }


postData('https://SomeURL', $parameters.FileBinary );


2023-08-28 07-00-10
Paulo Torres
Champion

I already did call with JS but nor for data in multipart formdata. 

I can share my code if you helps

2024-01-20 14-53-12
Ahmed Essawy

The JavaScript code you've provided for calling a REST API using multipart form data looks generally correct, but there are a few potential issues that could lead to a "Bad Server Response". Let's go through them:


1. **'no-cors' Mode**: The `mode: 'no-cors'` setting in your `fetch` request can be problematic. This mode is used for making requests to servers that do not send CORS headers. Responses to 'no-cors' requests are opaque, meaning you can't read the body or status of the response. This could be why you're seeing a "Bad Server Response". It's usually better to use `mode: 'cors'` if the server supports it.

2. **Content-Type Header**: When using `FormData`, the `fetch` API sets the `Content-Type` header to `multipart/form-data` with a proper boundary automatically. Ensure that the server expects this content type. If there are additional headers required (like authentication tokens), you need to include them.

3. **Error Handling**: You are throwing an error for any response status other than 200. However, some APIs might return different successful status codes (like 201 for created resources). Consider adjusting your error handling to accommodate such cases.

4. **Server-Side Configuration**: Ensure that the server is correctly configured to handle `multipart/form-data` requests. If there's a mismatch in expectations between the client and server, it can result in errors.

5. **Data Append**: Verify that `data` in `formData.append("Files", data);` is in the correct format that the server expects. For instance, if `data` is a file, ensure it's being passed as a `File` object.

6. **Check Network Response**: Use browser developer tools to inspect the network request and response. This can provide more details on what's going wrong.

- If you continue to receive bad responses, it's important to check the server logs or error messages for more specific information about what's going wrong.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.