You have two snippets, one of them uses web platform's fetch and FormData, it should not be affected by playwright, it might be a change caused by newer browser version. As far as I understand, the second example works fine when you say multipart: formData which is expected usage. Can you provide full reproduction example where the form data is not sent properly?

I apologize for any confusion. I provided two code snippets because we're dealing with two different types of file upload tests. The first one generates a file and sends it directly to the server programmatically using window.fetch. The second one uses page.setInputFiles to add the file to the Angular UI, which then sends the file to the server. Both of these methods generate a multipart: formData request. However, if I upgrade the Playwright version to 1.44, both tests fail as previously described. I managed to find a workaround for the first method using context.request.post. However, the second method still fails. I couldn't find a workaround for this because the file upload is entirely handled by the browser/Playwright.

I can confirm that if I use the same browser version in the same environment with Playwright 1.43.1, the tests pass. However, if I upgrade the Playwright version to 1.44, the tests fail due to an incomplete request body, as previously described.

After some investigation, we found that the cause of the issue is that the new version of playwright is somehow incompatible with our opentelemetry tracer setup.

I created a minimal reproduction environment, please find it attached. Please also find additional information in the README.md
Playwright-bug.zip

NOTE: The provided test will also fail with Playwright version 1.43.1 because the tracer isn't set up properly, but the file will be sent to the server successfully.

This is also happening to me. Tried the exact same request with postman and axios (it was a 200 on both), using formdata but it doesnt work on playwright (Using the same formdata on both but I get a 500 with playwright). Not sure if playwright somehow is malforming the request.

Not sure if it has something to do with boundaries..... but most of the multipart/form-data objects require a boundary set up in the content-type header (also a calculated content-lenght header is required).

Content-Type: multipart/form-data; boundary="yet another boundary"

--yet another boundary
Content-Disposition: form-data; name="foo"

bar
--yet another boundary
Content-Disposition: form-data; name="baz"

quux
--yet another boundary
Content-Disposition: form-data; name="feels"
Content-Type: text/plain; charset=utf-8

Boundaries can look like this: ----WebKitFormBoundaryNAoDVXaXyNhjWxtO or like this --------------------------377218823638245114258521

If I try to run my request from postman it will not work when I do not set any of those headers. But then they have this hidden/self-calculated headers... if I enable both , my request works.

some other libraries like axios creates automatically a boundary and then creates the header for Content-Type, they basically infer all these values internally (if you do not pass any content-lenght/content-type. or undefined, axios infers the values (including boundaries) from the multipart object) so , even if I do not pass any header for content, my request is successfull in axios.

When I run the same request in playwright I get the same error I get in postman when I do not pass any header for content-length/content-type. Playwright is also using the FormData library from typescript but there is another one were all these concepts are included , this is a node library .

import FormData from 'form-data';

function postYourRequest(url, data){
    const formData = new FormData();
        formData.append("your", data.value);
        formData.append("your", data.file); //works with duplicated field names
    const contentLength = formData.getLengthSync();
    let response = await axios({
      method: "post",
      url: URL,
      data: formData,
      headers: {
        "Content-Length": `${contentLength}`,
        ...formData.getHeaders()  // this will return this { 'content-type': 'multipart/form-data; boundary=--------------------------377218823638245114258521'} which includes the boundary corresponding to the formdata
      },
}

Typescript global library for FormData only includes the append method but not all the others to calculate the content-length/type . Also the real issue : If we dont set up these headers playwright does nothing about that and the request will fail. I tried getting all these values from the other form-data library and setup the header in playwright but looks like there is another issue..... probably the header for Content-Type is getting malformed, if you include the boundary parameter in the content-type, a 50 digit boundary is required, if it has one character less it will fail(if the boundary is less than 50 digits , remaining digits should be filled with dashes) .

This is already fixed in @next version of playwright.

@yury-s, thank you for the fix. Could you please provide the release date for the new 1.45 version?

It will be published in the next few weeks, maybe sooner.