[Bug]: Fileuploads leading to errors with Filament and Livewire #1524
Description
What Happened
Hi 🙋
As a disclaimer, I am not sure if this should be considered a bug or a feature request.
Currently I am developing an application with Filament (v4) and wanted to transition the E2E tests from Playwright to Pest.
The problem arises when trying to test a file upload using the FileUpload component from filament. From my limited understanding my guess is that Pest's attach() method does not properly trigger an event from Livewire that is required to correctly upload the file.
In Playwright I got this was working. The upload in the playwright test was accomplished using the FileChooser:
let fileChooserPromise = page.waitForEvent('filechooser');
await page.getByText('Drag & Drop your files or').click();
let fileChooser = await fileChooserPromise;
await fileChooser.setFiles(path.join(__dirname, '../../assets/profile_picture.png'));The error I am getting is coming from livewire (info logs before and after included):
[2025-10-01 14:46:15] local.INFO: {"path":"\/livewire\/update","method":"POST","ip":"127.0.0.1","headers":{"user-agent":["Mozilla\/5.0 (X11; Linux x86_64) AppleWebKit\/537.36 (KHTML, like Gecko) HeadlessChrome\/140.0.7339.186 Safari\/537.36"],"referer":["http:\/\/127.0.0.1:33101\/dashboard\/740f59a9-8389-48d3-a27f-403e9cad060e\/profile?customers-edit-tab=general-information%3A%3Adata%3A%3Atab"],"origin":["http:\/\/127.0.0.1:33101"]},"user_id":"12f3b1a2-9200-4dd5-9b2c-16148fd35908","request":{"_token":"EELsbObKFairr7ibMs62CqaZ14Uh1QYulPoZaZji","components":[{"snapshot":{"data":{"data":[{"id":"740f59a9-8389-48d3-a27f-403e9cad060e","name":"New Customer Name","avatar_url":[[],{"s":"arr"}],"created_at":"2025-10-01T14:46:10.000000Z","updated_at":"2025-10-01T14:46:10.000000Z"},{"s":"arr"}],"tenant":[null,{"class":"App\\Models\\Customer","key":"740f59a9-8389-48d3-a27f-403e9cad060e","s":"mdl"}],"mountedActions":[[],{"s":"arr"}],"defaultAction":null,"defaultActionArguments":null,"defaultActionContext":null,"defaultTableAction":null,"defaultTableActionRecord":null,"defaultTableActionArguments":null,"componentFileAttachments":[[],{"s":"arr"}],"areSchemaStateUpdateHooksDisabledForTesting":false,"discoveredSchemaNames":[["form","content","headerWidgets","footerWidgets"],{"s":"arr"}]},"memo":{"id":"421OeEKbpdzflXMYwVrS","name":"app.filament.resources.customers.pages.edit-customer-profile","path":"dashboard\/740f59a9-8389-48d3-a27f-403e9cad060e\/profile","method":"GET","children":{"App\\Filament\\Resources\\Customers\\RelationManagers\\CustomerUsersRelationManager":["div","o0iHmuP0ifqxSfHQCb5J"],"App\\Filament\\Resources\\Customers\\RelationManagers\\CustomerInvitesRelationManager":["div","MtzHtxoP1XuBrEzLWG6b"],"App\\Filament\\Resources\\Customers\\RelationManagers\\CustomerProjectsRelationManager":["div","vtcHsFr55eMgpIpMIO21"]},"scripts":["183985631-2","617597185-0"],"assets":[],"errors":[],"locale":"en"},"checksum":"cbec6ea271adb6e6fed68abfa0ae50d877c653bd4dc4898dbdabb3a955d92504"},"updates":[],"calls":[{"path":"","method":"_startUpload","params":["data.avatar_url.a8931e9a-cd9c-4414-8edd-88232d2f07d4",[{"name":"profile_picture.png","size":8826,"type":"image\/png"}],false]}]}]}}
I was not able to find an equivalent to the "FileChooser" in pest, i only found the attach() method.
How to Reproduce
- Install Laravel
- Install Filament
- Install Pest browser test plugin
- Setup a Filament panel
- Create a FileUpload form field somewhere in the filament panel, e.g. on the Profile Page
- Create Pest browser test and try to upload file via the
attach()method
Sample Repository
https://github.com/SayHeyD/pest-filament-file-upload
Pest Version
4.1.1
PHP Version
8.4.12 & 8.3.26
Operation System
macOS
Notes
No response