Filepond image gallery issue
Hello everyone. I am baddly suffering of puling my hairs while fioghting with Filepond to allow a simple user gallery to allow:
1. Image adding
2. Image re-ordering
3. Pre-existing images showing in the gallery
4. Update of any image from the gallery and post back to DB and file storage
I am able to do steps 1-3 no worries and almost any script would do that, but when we need to edit existing images, I am not sure how to pass them as objects as I am able to pass their ID, name and src (full image path) but when I remove one image from existing (for example) and then try to resubmit, it does not validate as it does not see the images as objects.
Tried with another simpler gallery as I can live without image reordering, but that did not work either because of the same issue. The current one I am testing is: jquery image-uploader-master.
Has anyone made ever a gallery to allow to show existing images, remove/add new images, clean what is old and got removed and resubmit back the proper data? Any gallery would work as far as I can make it work as it has been too long and I am surprised all the tutorials, videos, manuals etc. I've read are only talking about adding images, but not removing and updating/reordering those...
Starting to think I should build my own gallery at this time, but I just want to finish my project and focus on the PET CLINIC as I am sooo behind... 😦
3 Replies
@tuto1902 This could be a great idea for a small tutorial (if your time permits and interested) as I 've been reading over 1000 manuals, folllowed same qantity videos and none of those is available to just share how to upload images, show them in gallery and allow editing in any sort (reorder, remove, upload new) and then resubmit.
Sounds easy-beasy but it seems nobody has ever shared such or nobody has ever achieved/needed it.
I am so envy to see that Filament does allow the proper submission and resubmission but my prioject is far far away to swith everything to Filament and there are plenty of custom designs and tons of code to rewrite so I am stuck searching for a solution or suggestions that I migh have missed...
I'll look into it and see what I can do
Thank you in advance. The only issue I am facing is how to load the pre-existing images to filepond as objects so that I can do any image manipulations and simply resubmit them. Seems like not a biggie but so far I've tried using hidden inputs for every image and compare values, tried various files[] optioins to pass to filepond - just not working and not working and many of the people that teach how to achieve the functiionality seem like intentionally avoided loading pre-existing images as they were aware of the issues to face with that.
Checked even the videos of laraveldaily and nothing so far...
I think I've found something interesting that worth a shot, just need to figure out how to implement it properly..
async URLtoFile(path) {
let url =
${window.appUrlStorage}/${path};
let name = url.split('/').pop();
const response = await fetch(url);
const data = await response.blob();
const metadata = {
name: name,
size: data.size,
type: data.type
};
let file = new File([data], name, metadata);
return {
source: file,
options: {
type: 'local',
metadata: {
name: name,
size: file.size,
type: file.type
}
}
}
}
This code would get the constructed URLs from database and convert them as BLOB (objects) to pass to filepond instance. And as such, we can always delete, re-order and re-post eliminating the issue