How to load default image in FilePond - laravel

Question

According to the documentation server configuration for load should return a file object with header Content-Disposition, but what does file object means? How does it looks like?
With my code below I can load the image name correctly only, I need to load preview image and file size also.
Javascript
<script>
FilePond.registerPlugin(FilePondPluginFileValidateType);
FilePond.registerPlugin(FilePondPluginFileValidateSize);
FilePond.registerPlugin(FilePondPluginImagePreview);
FilePond.registerPlugin(FilePondPluginFilePoster);
FilePond.setOptions({
server: {
process: '/upload',
revert: '/remove',
load: '/load/?serverId=',
headers: {
'X-CSRF-TOKEN': '{{ csrf_token() }}'
}
}
});
const inputElement = document.querySelector('#filepond');
const pond = FilePond.create(inputElement, {
files: [
#foreach ($productItem->galleries as $gallery)
{
source: '{{ $gallery->id }}',
options: {
type: 'local',
}
},
#endforeach
],
acceptedFileTypes: ['image/*'],
maxFileSize: '5MB',
onremovefile: (error, file) => {
if (error) {
console.log('Oh no');
return;
}
console.log('File removed', file.getMetadata('serverId'));
}
})
</script>
PHP
public function load(Request $request) {
$file = FileItem::find($request->serverId);
return response()
->json($file->path, 200, [
'Content-Disposition' => "inline; filename='$file->filename'",
]);
}

Answer 1

I see you are using Laravel, instead of handling filepond from scratch. I recommend you to use https://github.com/rahulhaque/laravel-filepond
Easy to use, and if you want to load an initial image or file. you just need a little customization. here is how I handle it.
FilePond.registerPlugin(
FilePondPluginFileValidateType,
FilePondPluginImagePreview,
);
// this is the url of image.
let url = `{{ $slider->getFirstMedia('sliders')->getUrl() }}`;
FilePond.setOptions({
server: {
url: "{{ config('filepond.server.url') }}",
headers: {
'X-CSRF-TOKEN': "{{ #csrf_token() }}",
},
load: (source, load, error, progress, abort, headers) => {
// now load it using XMLHttpRequest as a blob then load it.
let request = new XMLHttpRequest();
request.open('GET', source);
request.responseType = "blob";
request.onreadystatechange = () => request.readyState === 4 && load(request.response);
request.send();
},
}
});
// don't forget to set options local to tell filepond this is already uploaded
// parameter sourse ask for url.
FilePond.create(document.querySelector('#cover'), {
acceptedFileTypes: ['image/png', 'image/jpeg'],
files: [{
source: url,
options: {type: 'local'},
}],
});
Filepond