File Upload Stuck and Previously Uploaded Images Show as Black Boxes in Wizard (Edit Mode)

[mstrihi]

Package

filament/filament

Package Version

v3.2.112

Laravel Version

v10.0.0

Livewire Version

v3.0

PHP Version

PHP 8.3

Problem description

When using the FilamentPHP Wizard with a FileUpload field in any step after the first, there is a persistent issue when editing a record. Previously uploaded images appear as black boxes, and new image uploads get stuck in the loading state, making it impossible to upload or display files properly.

Additional Observations:
The issue only occurs when the FileUpload field is the only field in a given step of the Wizard. If another field that loads data from the database is added to the same step, both previously uploaded images and new uploads work correctly.

Possible Workaround:
Adding another database-driven field alongside the FileUpload field in the same step resolves the issue temporarily.

Expected behavior

Previously uploaded images should be displayed properly, and new images should upload without being stuck in a loading state.

Steps to reproduce

Steps to Reproduce:

1. Create a form using FilamentPHP's Wizard with multiple steps.
2. Add a FileUpload field in a step other than the first one.
3. Submit a form with an uploaded image.
4. Edit the form entry and navigate to the step with the FileUpload field.
   • Previously uploaded images will display as black boxes.
   • Any attempt to upload a new image will get stuck in the loading state.

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

https://github.com/mstrihi/Fileupload-issue

Relevant log output

No response

[yogesh16]

Need more information, Can you provide network log.

[mstrihi]

@yogesh16 still filepond isn't initializing in the wizard on the edit pages. when I add if I added ->previewable(false) then that works.

Works only on first step but if the Fileupload was in step number 4 for example still not initializing only on edit page.

and here is network log

[mohdaftab]

Hello, did you get any solution for this issue please?

[mstrihi]

@mohdaftab no, did you had same issue?

[mohdaftab]

@mohdaftab no, did you had same issue?

Yes, I am facing the same issue as I am using tabs in my listing form and the image tabs are messed up when I am on edit page. But all the pictures display properly when I click on any of the image inside that tab, it seems like the styles are not being initialized if they are under a tab or wizard step. I have attached the screenshot as well.

[mstrihi]

@mohdaftab yes, the main problem is on edit page only and yes the issue the plugin of the fileupload not being initialized

[josfaber]

My issue was that although I had Herd serve the site over https, my APP_URL was still on http, giving mixed content errors when loading the previews. Might be worth to double check that

[sandersjj]

My issue was that although I had Herd serve the site over https, my APP_URL was still on http, giving mixed content errors when loading the previews. Might be worth to double check that

I had the same issue and fixing the APP_URL fixed it for me.

[calintro]

I'm facing the same issue with file upload inside a tab. I've tried a lot of fixes, but nothing worked so far. Maybe there's a way to re-render livewire/filepond when you change the tab/wizard step?