Issue in the Login Screen Width + File-Upload not working (only on production using docker image)

[MohammadSalahat]

Package

filament/filament

Package Version

v3.3.3

Laravel Version

v11.44.1

Livewire Version

v3.6.1

PHP Version

v8.3

Problem description

When i did upgrade filament from v3.2.113 to v3.3.3, i forced some bugs,

1. Bug with the login screen where the width is broken

2. Bug when uploading a file in the form file-upload field

Expected behavior

The login Form should have this width

The File upload should accept uploading a file

Steps to reproduce

• Create a Laravel Project with Filament Admin Panel
• Build a Docker Image
• Publish project to the development or production server
• Open Login Page, observer the login form is taking full width
• Login, then go to any form that have a file upload filed, try uploading an image, observe error, where the error say that the image always is invalid type

Reproduction repository (issue will be closed if this is not valid)

https://github.com/MohammadSalahat/filament-issue

Relevant log output

file-upload.js?v=3.2.136.0:1 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'insertBefore')
    at Na (file-upload.js?v=3.2.136.0:1:9462)
    at Object.replaceElement (file-upload.js?v=3.2.136.0:2:73514)
    at jd (file-upload.js?v=3.2.136.0:2:75143)
    at qd (file-upload.js?v=3.2.136.0:2:75184)
    at ft (file-upload.js?v=3.2.136.0:2:77389)
    at Proxy.init (file-upload.js?v=3.2.136.0:40:95697)

[danharrin]

Please share any browser console/JS errors

[MohammadSalahat]

I just added the browser console/JS errors

[danharrin]

What is the exact latest Filament version that still works?

[MohammadSalahat]

v3.2.113

[danharrin]

So v3.2.114 is broken?

[MohammadSalahat]

I have never used that version, first, i did update the filament to the newest patch using this line in the composer file "~3.2.0", this did update me to v3.2.142, it worked for the first time, but when i updated to v3.3.3 and then downgrade again to v3.2.142 it never work again, those are the only versions I have tried

[danharrin]

Please go through each version and find the latest version that is working.

[MohammadSalahat]

• v3.2.137 is the last stable version where file uploading works correctly.
• v3.3.0 to v3.3.4 have a validation issue where the file type is incorrectly rejected.
• v3.2.138 to v3.2.142 have an issue where the image is not uploaded the first time, but works when re-uploaded.

[danharrin]

v3.2.138 has asset changes, so it is very likely that your published assets are out of date. Run filament:upgrade and ensure that the assets are not cached anywhere (e.g. Cloudflare).

[MohammadSalahat]

I did upgrade my filament to v3.2.138 using composer, and i have this script in the composer:

"scripts": {
        "post-autoload-dump": [
            "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
            "@php artisan package:discover --ansi",
            "@php artisan filament:upgrade"
        ],
}

But i still force this issue (v3.2.138 to v3.2.142 have an issue where the image is not uploaded the first time, but works when re-uploaded.)

Note: currently i am using a Lenode server with no Cloudflare services

https://github.com/user-attachments/assets/4caae59c-ef00-4d45-b5bd-77ad09265d82

and this is my console/js error:

file-upload.js?v=3.2.136.0:1 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'insertBefore')
    at Na (file-upload.js?v=3.2.136.0:1:9470)
    at Object.replaceElement (file-upload.js?v=3.2.136.0:2:73514)
    at Hd (file-upload.js?v=3.2.136.0:2:75143)
    at jd (file-upload.js?v=3.2.136.0:2:75184)
    at ft (file-upload.js?v=3.2.136.0:2:77389)
    at Proxy.init (file-upload.js?v=3.2.136.0:40:95682)

[carloslopes34]

Same problem on the login screen and in the table when clicking on pagination or performing a search or filter, has anyone managed to solve it? I have already removed the composer and reinstalled it, I have already run the laravel and filament commands but nothing works, any tips you have beyond that I would be very grateful.

[CloudMyn]

Have you ever published the Filament vendor? Try checking the resources/views folder`if there's a vendor folder in there, just delete it and republish.

[binsarjr]

up. i have same issues

[Jaylinkz]

hello, have you been able to solve this?

[krishzzi]

No issue with "name": "filament/filament", "version": "v3.3.17",

[sindaniel]

I'm experiencing the same issue when using Filament with Docker and a reverse proxy setup via Apache.

The error is triggered in the following file:

vendor/livewire/livewire/src/Features/SupportFileUploads/FileUploadController.php

Specifically, on this line:

abort_unless(request()->hasValidSignature(), 401);

This suggests that the issue is related to the signed request validation.

After some debugging, I noticed that when calling:

request()->ip()

it returns the container's internal IP instead of my public IP. This may not be the root cause, but it's likely related and could help narrow down the issue.

Hope this helps in identifying the solution!

[danharrin]

Probably a bad TrustProxies middleware config?

[danharrin]

I am not able to reproduce the issue, but as above I think it is a config issue rather than a Filament bug so I am closing this