Plugin doesn't show the json response after using formData as request body

[Maria-Pahome]

[filiphric]

hey @Maria-Pahome could you please give me an example of how you use formdata with this plugin? it would help me investigate and fix the issue

[LaritaStevanovic]

I am having this same issue, I used formData and Blob to upload file through API and I am not getting any json response. Also request body is showing empty array in runner.

        cy.fixture('Screenshot 2024-07-12 at 10.13.51 (1).png', 'binary').then((fileContent) => {

            const blob = Cypress.Blob.binaryStringToBlob(fileContent, 'image/png')
        
            const formData = new FormData()
            formData.append('file', blob, 'Screenshot 2024-07-12 at 10.13.51 (1).png')
            
            cy.api({
                method: 'POST',
                url: `${Cypress.env('apiBaseUrl')}/files`,
                failOnStatusCode: false,
                headers: {
                    'Accept': 'application/json',
                     Authorization: 'Bearer ' + `${Cypress.env('SuperUserToken')}`,
                },
                body: formData
                
            })
            .then(response => {
                expect(response.status).to.eq(200)
})
})

[Dale-777]

this is correct the visual interface that cy.api provides does not render, this is due to an issue with cy.request: cypress-io/cypress#24560

a workaround is available that could also be applied to this plugin:

 if (requestData instanceof FormData) {
        res.body = JSON.parse(new TextDecoder().decode(res.body)); // workaround due to cypress incompetency to handle FormData 
      }

cy.api({
      method,
      url: endpoint,
      body: requestData,
      headers: {
        ...reqHeader,
        "Content-Type": "multipart/form-data",
      },
    }).then((res) => {
      if (requestData instanceof FormData) {
        res.body = JSON.parse(new TextDecoder().decode(res.body)); // workaround due to cypress incompetency to handle FormData 
      }
      Cypress.env("apiResponse", res);
      cy.log(JSON.stringify(res.body)); // Log the response body for debugging
    });

  const randomString = faker.string.alpha({ length: 7, casing: "lower" });
  const fileName = "CSV-example.csv";
  cy.fixture(fileName).then((csvContent) => {
    const formData = new FormData();
    formData.append("provider", `api-test-datahub-csvupload-${randomString}`);
    formData.append("file", new Blob([csvContent], { type: "text/csv" }), fileName);
    Cypress.env("requestData", formData);
    Cypress.env(requestDataVarName, formData);
    Cypress.env("uploadedFileName", fileName);
  });