[Bug]: Request payload is empty when form enctype is multipart/form-data

[zadkiel87]

What Happened

When I use pest browser to test the submission of a form of type "multipart/form-data" (mixing text inputs and file upload) I expect the request in the backend (Laravel controller) to contain the inputs values.

In the network tab (with playwright used in head mode) I can check that all inputs are sent in the request by the browser. But on Laravel side the request inputs are empty (Same thing if I output $_POST or php://input).

If I remove the type "multipart/form-data", I receive the expected inputs but obviously it breaks the file upload.

How to Reproduce

1. Write a simple post form in a Laravel app with the enctype "multipart/form-data".
2. Add an handler in Laravel that ouputs the content of request (e.g request->all())
3. Write a browser test with Pest that submits the form

Sample Repository

No response

Pest Version

4.0.4

PHP Version

8.4.2

Operation System

macOS

Notes

No response

[kkls-mike]

Faced same issue, hope it will be fixed soon!

As a temporary workaround im using a middleware

public function handle(Request $request, Closure $next): Response
    {
        if (
            $request->isMethod('post') &&
            empty($_POST) &&
            app()->runningUnitTests() &&
            !empty($request->getContent())
        ) {
            parse_str($request->getContent(), $data);
            $request->merge($data);
        }

        return $next($request);
    }

[gtg-bantonio]

DISCLAIMER: I'm not affiliated to PestPHP, be sure to review any code before installing.

Hey, could you test pestphp/pest-plugin-browser#177 if that solves your problem? I was working in a fix and I want to have more insights.

You can add it adding this in your composer.json and executing composer require pestphp/pest-plugin-browser:4.x-dev#d1918aabdefb5de2c831e463b57053ab51629409

"repositories": [
    {
        "type": "vcs",
        "url": "https://github.com/gtg-bantonio/pest-plugin-browser.git"
    }
]

[eubentof]

@gtg-bantonio I tried your solution, its working for almost everything of my cases. I have this specific payload that is parsing worngly:

"------WebKitFormBoundarylI2kW4AIGVRAgA8j Content-Disposition:_form-data;_name": 
""salaryExpectation[value]" 100000 ------WebKitFormBoundarylI2kW4AIGVRAgA8j Content-Disposition: form-data; name="salaryExpectation[currency]" brl ------WebKitFormBoundarylI2kW4AIGVRAgA8j Content-Disposition: form-data; name="fullName" John Doe ------WebKitFormBoundarylI2kW4AIGVRAgA8j Content-Disposition: form-data; name="email" john.68e79265daf79@example.com ------WebKitFormBoundarylI2kW4AIGVRAgA8j Content-Disposition: form-data; name="password" Password1! ------WebKitFormBoundarylI2kW4AIGVRAgA8j Content-Disposition: form-data; name="passwordConfirmation" Password1! ------WebKitFormBoundarylI2kW4AIGVRAgA8j Content-Disposition: form-data; name="phone[number]" 11999999999 ------WebKitFormBoundarylI2kW4AIGVRAgA8j Content-Disposition: form-data; name="phone[code]" 55 ------WebKitFormBoundarylI2kW4AIGVRAgA8j Content-Disposition: form-data; name="address" 123 Main St ------WebKitFormBoundarylI2kW4AIGVRAgA8j Content-Disposition: form-data; name="isCurrentlyWorking" 1 ------WebKitFormBoundarylI2kW4AIGVRAgA8j Content-Disposition: form-data; name="startAvailability" 1 ------WebKitFormBoundarylI2kW4AIGVRAgA8j Content-Disposition: form-data; name="educationLevel" 2 ------WebKitFormBoundarylI2kW4AIGVRAgA8j Content-Disposition: form-data; name="source" 1 ------WebKitFormBoundarylI2kW4AIGVRAgA8j Content-Disposition: form-data; name="curriculumVitae"; filename="dummy_cv.pdf" Content-Type: application/pdf %PDF-1.4 %���� 1 0 obj <</Title (dummy_cv) /Producer (Skia/PDF m140 Google Docs Renderer)>> endobj 3 0 obj <</ca 1 /BM /Normal>> endobj 5 0 obj <</Filter /FlateDecode /Length 236>> stream x���Aj�1E�:�.��$˖ �,2IC�����m�(t��P��2PBic�[���?f�Z ��e��O�����ﻊ�S��pn�g�v��7�����B���Np�A0�veP�*cn�F��}����M��a��a]�{RduqZ����Duj9���e��;1����w���,���BR1�uhvBjNr����b�<"N(�џ��9���",
"�w�����_�O�w���ќ������b������": 
""
}

It parses as

{
	"salaryExpectation": {
		"value": "100000",
		"currency": "brl"
	},
	"fullName": "John Doe",
	"email": "john.68e795662da0c@example.com",
	"password": "********",
	"passwordConfirmation": "Password1!",
	"phone": {
		"number": "11999999999",
		"code": "+55"
	},
	"address": "123 Main St",
	"isCurrentlyWorking": "1",
	"startAvailability": "1",
	"educationLevel": "2",
	"source": "1",
	"agreeToTerms": "1\r\n------WebKitFormBoundarywzCk4KWO4tVzNVBi\r\nContent-Disposition: form-data; name=\"positionId\"\r\n\r\n1\r\n--",
	"curriculumVitae": {
		"name": "dummy_cv.pdf",
		"size": "9.721KB"
	}
}

[gtg-bantonio]

@eubentof I notice that too, is because the mb_* functions, could you try update the library to the last commit with composer require pestphp/pest-plugin-browser:4.x-dev#d1918aabdefb5de2c831e463b57053ab51629409?

That version was tested with a very large script with deeply nested fields and empty files

[eubentof]

@gtg-bantonio its working for me now!

[JeffreyWay]

I was confused for an hour this morning trying to figure out why the request payload for a form submission was empty...even though everything worked perfectly when manually testing it in the browser. I should have checked GitHub sooner. Took me a while to try removing enctype="multipart/form-data. That fixed the payload issue.

(And this PR solved the problem entirely btw.)

[akulmehta]

The PR by @gtg-bantonio solved the issue for me as well. Hopefully it can be merged.

[enkay]

Any chance that PR can be updated and merged?

[radmax]

This might be caused by Pest Browser running the app behind an AMP HTTP server (LaravelHttpServer).

AMP’s http-server does not parse multipart/form-data by default, so Symfony/Laravel ends up with empty POST data and files. This matches the behavior described here.

AMP provides an official parser for this use case:
https://github.com/amphp/http-server-form-parser

It could be worth integrating this in LaravelHttpServer when mapping the AMP request to a Symfony/Laravel request.

This would also explain why JSON requests work but multipart forms don’t.

[gtg-bantonio]

@radmax I tried to use the AMP multipart parser, but sadly is very CGI-compatible, and PHP build atop the CGI spec (just like treat input[1]=value as array(1 => 'value')), so I have to use in my PR the ReactPHP parser

[radmax]

I see. I also tried your fix and it works.

[homiedopie]

Thanks to @gtg-bantonio for the inspiration and @radmax for the http-server-form-parser idea.

I created a PR to address the issue using that approach. pestphp/pest-plugin-browser#200

Let me know if you encounter any issues

inside composer.json

{
    "require-dev": {
        "pestphp/pest-plugin-browser": "dev-fix/multipart-form-parser",
        ...
    },
    "repositories": [
        {
            "type": "vcs",
            "url": "https://github.com/homiedopie/pest-plugin-browser"
        }
    ]
}