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.
18 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.
