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.
No description
18 Replies
mohdaftab
mohdaftabOP3w ago
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.
LeandroFerreira
#✅┊rules
No description
mohdaftab
mohdaftabOP3w ago
I am sorry about it.
LeandroFerreira
did you config the APP_URL in the .env file?
mohdaftab
mohdaftabOP3w ago
Yes I did APP_URL=https://realestate.site this is on local at the moment
LeandroFerreira
console errors?
mohdaftab
mohdaftabOP3w ago
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.
mohdaftab
mohdaftabOP3w ago
something like this, even though the image quality is really good.
No description
mohdaftab
mohdaftabOP3w ago
no console errors
No description
mohdaftab
mohdaftabOP3w ago
this is the images tab
No description
mohdaftab
mohdaftabOP3w ago
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
Azad Furkan ŞAKAR
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.
mohdaftab
mohdaftabOP3w ago
@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?
Azad Furkan ŞAKAR
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.
mohdaftab
mohdaftabOP3w ago
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 }); }); });
awcodes
awcodes3w ago
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.
mohdaftab
mohdaftabOP3w ago
@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.
mohdaftab
mohdaftabOP2w ago
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.
No description
Want results from more Discord servers?
Add your server