Uploading multipart/form-data from text file using Cypress

Question

I've been at this all day and I really need a nudge in the right direction.

My dependencies are -

  "dependencies": {
    "typescript": "^4.3.5",
    "cypress": "^8.1.0",
    "cypress-file-upload": "^5.0.8"
  } 

I have a fixture called uploadBlob.txt

This is what it looks like -

------WebKitFormBoundary7BhOPSS0NpEAppSA
Content-Disposition: form-data; name="UploadedFileName"

Prod_CA.ACI
------WebKitFormBoundary7BhOPSS0NpEAppSA
Content-Disposition: form-data; name="OrderId"

7815968_13735
------WebKitFormBoundary7BhOPSS0NpEAppSA
Content-Disposition: form-data; name="Options[orderid]"

7815968_13735
------WebKitFormBoundary7BhOPSS0NpEAppSA
Content-Disposition: form-data; name="Options[clientcode]"

1135
------WebKitFormBoundary7BhOPSS0NpEAppSA
Content-Disposition: form-data; name="Options[vendorserviceurl]"

[... 80+ More Items ...]

------WebKitFormBoundary7BhOPSS0NpEAppSA--

what I would like to do is something like this -

Cypress.Commands.add("formRequest", (info: ReqInfo) => {
    cy.readFile("./fixtures/uploadBlob.txt", "utf-8").then(fixture => {
        const blob = Cypress.Blob.binaryStringToBlob(fixture, "application/text");
        const formData = new FormData();
        formData.append('file', blob, "uploadBlob.txt");

        return cy.request({
            url: info.url,
            method: info.method,
            headers: info.headers,
            form: true,
            body: formData
        })
    })
});

info looks like this -

let info : ReqInfo = {
   method: "POST",
   url : 'https://uat-delivery.acisky.com/Delivery/bkfs/Start',
   headers: {
       'Authority': 'uat-delivery.acisky.com',
       'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundary7BhOPSS0NpEAppSA',
       'Path': '/DeliveryUpload/bkfs/UploadFile',
       'sec-fetch-dest': 'empty',
       'sec-fetch-mode': 'cors',
       'sec-fetch-site': 'same-origin',
       }
 }

Here is the error that I'm getting -

From Node.js Internals:
  TypeError [ERR_INVALID_ARG_TYPE] [ERR_INVALID_ARG_TYPE]: The first argument must be of type string or an instance of Buffer, ArrayBuffer, or Array or an Array-like Object. Received undefined
      at Function.from (buffer.js:333:9)
      at Object.sendPromise 

And finally I've tried multiple iterations of XMLHttpRequest() based on these -

• In Cypress sending form data using POST request is not working
• Multipart formdata POST request just doesn't work in Cypress for me
• How to Upload txt file with Cypress for API Testing - XMLHTTPRequest?

For example -

Cypress.Commands.add("formRequest", (info: ReqInfo) => {
    cy.readFile("./fixtures/uploadBlob.txt", "utf-8").then(fixture => {
        const blob = Cypress.Blob.binaryStringToBlob(fixture, "application/text");
        const formData = new FormData();
        formData.append('file', blob, "uploadBlob.txt");

        const xhr = new XMLHttpRequest();
        xhr.responseType = 'text';
        xhr.onload = function () {
            if (xhr.readyState === xhr.DONE) {
                if (xhr.status === 200) {
                    console.log(xhr.response);
                    console.log(xhr.responseText);
                }
            }
        };

        xhr.open(info.method, info.url);
        xhr.setRequestHeader("accept", "application/json");
        xhr.setRequestHeader("content-Type", "multipart/form-data");
        xhr.setRequestHeader('Authority', 'uat-delivery.acisky.com'),
        xhr.send(formData);

    })

but here I am getting the error -

{"errors":["No file found in request"]}

even though I can see that the ReadFile is working correctly.

The reason I am going the readFile/fixture route with the WebKitBoundry is because there are over 80 "fields" and in the future, we are going to need 20-30 variations of this file.

If anyone has any ideas of how to accomplish this task, I would love the help.

Thank you

Answer 1

I am posting an update incase anyone comes across this of how I solved it.

        it('Should Upload the ACI document', () => {

            let url = format(aci_url, ENV.env, workOrder.workOrderId, integrator.postfix)

            cy.visitURL(url).enter().then(iFrame => {
                iFrame().find(UploadDocPage.pageBody).then(input => {
                        cy.fixture("./files/" + UploadDocPage.fixtureName, 'binary')
                            .then(Cypress.Blob.binaryStringToBlob)
                            .then(fileContent => {
                                cy.wrap(input).attachFile({
                                    fileContent: fileContent,
                                    filePath: UploadDocPage.fixtureName
                             }).task("log", `Document Attached`)
                        })
                    }).wait(5000)

                iFrame().waitForElement(UploadDocPage.goButton).click({force: true})
                iFrame().waitForElement(UploadDocPage.deliverButton).click({force: true})
                cy.task("log", `Document Sent`)
            })
        })

What made this even more difficult was that it was in an iFrame().

The file was an ACI document ("TestFile.ACI") - Essentially it takes the fixture as a binary, turns it into a blob string, and then sends the string to the "Input".