I can't seem to figure out how to show image preview when editing a model. Please note that source in my server.load is actual s3 url to the image. I'm able to access the image and it shows up just fine on index page. I'm able to see the preview when uploading the images. I think my problem is related to this:
server returns a file object with header Content-Disposition: inline; filename="my-file.jpg"
here is my code:
import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
import FilePondPluginFilePoster from 'filepond-plugin-file-poster';
import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';
FilePond.registerPlugin(
FilePondPluginImagePreview,
FilePondPluginFilePoster,
FilePondPluginFileValidateType
);
FilePond.setOptions({
allowMultiple: true,
allowFileTypeValidation: true,
acceptedFileTypes: ["image/png", "image/jpeg"],
server: {
process: async (fieldName, file, metadata, load, error, progress, abort) => {
const extension = file.type === "image/jpeg" ? "jpg" : "png"
const {url} = await fetch("/s3Url/"+extension).then(res => res.json())
await fetch(url, {
method: "PUT",
headers: {
"Content-Type": "multipart/form-data"
},
body: file
}).catch((err) => {
console.log(err)
}).then(res => {
const path = url.split("?")[0]
load(path)
})
},
load: (source, load, error, progress, abort, headers) => {
fetch(source, {
method: "GET",
}).then(res => res.blob()).then(load)
}
}
});
const fp_files = $('#fp-files').data("fp-files")
const inputElement = document.querySelector('input[type="file"]')
if(typeof fp_files === "undefined" || fp_files === "") {
FilePond.create(inputElement)
} else {
const fp_file_urls = fp_files.split(",")
let fp_array = []
fp_file_urls.forEach((currentValue, index, arr) => {
fp_array.push({source: currentValue, options: {type: 'local'}})
})
FilePond.create(inputElement, {
files: fp_array
})
}