Fileupload multiple image in a tab not displaying images properly
Hello,
I am using multiple tables with Fileupload for multiple images and it works good but when I go to edit page and click on that tab, the previews look like the screenshot I have attached.
When I click on any of the images they all appear just fine, I don't understand why they are not displaying when the tab loads the first time?
Please help me fix this issue.
Thank you so much.
23 Replies
bumpp
@Dan Harrin please take a look at this issue as I have been waiting for the solution since 4 days. Really appreciate it, thank you.
#✅┊rules
I am sorry about it.
did you config the APP_URL in the .env file?
console errors?
There are no errors
let me show you
it is like when I click on any the images tab it is like this as in the screenshot, but when I click on any of the image then all the images are aligned perfectly but the thumbnail quality is very low seems like enlarging a low pixel image.
something like this, even though the image quality is really good.
no console errors
this is the images tab
I have 2 tabs which has these fileupload inputs
It seems like every time I go on the tab it changes the layout, so do you think it has to be re-initialized every time the tab is active please ?
I also noticed that switching the browser tab or window to another and coming back also makes it display properly
This happened to me too before, i think it's bug from filepond or livewire.
When rendering the page, there is no problem while in the default active TAB, but there is a problem loading media while in other TABs.
@Azad Furkan ŞAKAR yes it looks like a bug but unfortunately there is no fix for this, I also encountered it before in some months ago but I had to switch to the Curator plugin, but this one has multiple users and the pictures are only for each listing.
Did you get it fixed?
Unfortunately, I could not find a solution and I let it go. I am waiting for it to be fixed because my work does not allow me to deal with it for so long.
I understand, thank you.
@Azad Furkan ŞAKAR I figured that by clicking on any of the filepond item makes it work properly so I just used this javascript and it seems to work great every time I click on the tab
document.addEventListener('DOMContentLoaded', () => {
const tabs = document.querySelectorAll('[role="tab"]');
tabs.forEach(tab => {
tab.addEventListener('click', () => {
setTimeout(() => {
const filePondElements = document.querySelectorAll('.filepond--item');
filePondElements.forEach(filePond => {
filePond.click();
});
}, 200); // Delay to allow tab transition
});
});
});
For what it’s worth I think there’s is something going on in livewire. I’m seeing similar things with modals too in multiple use cases where alpine components aren’t getting initialized when loaded asynchronously. Still not sure if it’s in livewire or async alpine.
@awcodes thank you for the reply. I hope they fix it soon, I will use this temporary fix for now which seems to work for the tabs.
the issue is sorted with that javascript code, but here is another issue, the preview images are very low in quality somehow, it seems to be loaded for smaller mobile screens.
Have you been able to solve this? I've been having the exact same problem for a while now and I can't seem to fix it.
https://github.com/filamentphp/filament/issues/15394
GitHub
SpatieMediaLibraryFileUpload panelLayout Grid · Issue #15394 · fila...
Package filament/filament Package Version v3.2.133 Laravel Version v11.38.2 Livewire Version No response PHP Version 8.2 Problem description When I use ->panelLayout('grid') sometimes th...
If I remove ->panelLayout('grid') it's works. But it's not right if we have a hundred photos.
@Daniel Reales I gave it up as it wasn't working even after trying many things.
Hi, do you perhaps have a github repo where we can replicate the issue easily? That woule incentivise people to help check this out (and if it's a confirmed issue get it fixed for everybody).
Else it's a bit hard to do a deepdive (in cases like this where there are no console errors, ....). Thanks!
I have this repository:
https://github.com/danielreales7/test-spatie-lmedia
GitHub
GitHub - danielreales7/test-spatie-lmedia
Contribute to danielreales7/test-spatie-lmedia development by creating an account on GitHub.