• 2 min read

Fixing the Silent File Upload Bug in Livewire 2

How I finally tracked down a random file upload issue that haunted our internal app for two years, only to find out it was a Livewire background request race condition.

Just like the Supervisor log issue I mentioned earlier, there was another bug in our internal app that I had been ignoring for a long time.

Multiple users would tell me that the file upload input wasn’t working. Every time I checked it, it worked fine for me. I usually just told them to retry, and most of the time that “fixed” it. Because the reports were rare and I had so many high-priority tasks from management, I kept pushing it down the to-do list.

The 9MB File Clue

Last week, I finally had to deal with it. One user was constantly chasing me because he couldn’t upload a 9MB file. There were no error messages, but after he submitted the form, the file was just missing.

I was already exhausted from the SAP integration work, but when he came back the next day saying it still wasn’t working, I decided to jump on a call and watch him do it live.

The Real Problem: Silent Background Requests

After doing some research and watching the network tab, I found out how Livewire 2 actually handles uploads. The moment a user selects a file, Livewire sends a silent request to the server to upload it to a temporary folder.

The “bug” was actually a race condition:

  • If the file is large (like 9MB), it takes a few seconds to upload.
  • If the user hits the Submit button before that background upload finishes, the form submits without the file reference.
  • Most users were slow enough that it worked, but the “fast” users or those with large files were outrunning the background request.

The Solution

The fix was simple but necessary: I had to disable the submit button the moment the upload starts and show a “File Uploading…” loader so the user knows to wait.

I used Livewire’s wire:loading and wire:target features:

  1. Disable the button: Added wire:loading.attr="disabled" to the submit button.
  2. Show a loader: Added a loading spinner that only triggers when the specific file input is active.

It’s a relief to finally have this off my plate after two years, but now I realized I have to go back and implement this same fix across 15 other forms in the application!