I use FilePond to show displays existing data like image and pdf. When displaying images it works but when displaying pdf: Invalid PDF structure.
I saved the file in storage and run artisan storage command
this my code on controller
$proposal = Proposal::find($id);
if (!$proposal) {
return redirect()->back()->with('error', 'Proposal not found.');
}
$files = $proposal->files();
$filePondFiles = Files::whereIn('id', json_decode($proposal->proposal_file_id))->get()->map(function ($file) {
return [
'source' => asset($file->file_path),
'options' => [
'type' => 'local',
'metadata' => [
'poster' => asset($file->file_path)
],
'file' => [
'name' => $file->file_name,
'size' => $file->file_size,
'type' => $file->file_type,
],
],
];
});
and this my script :
// Register the plugins
FilePond.registerPlugin(
FilePondPluginFileValidateType,
FilePondPluginFileEncode,
FilePondPluginFileValidateSize,
FilePondPluginImageExifOrientation,
FilePondPluginImagePreview,
FilePondPluginPdfPreview,
FilePondPluginFilePoster,
);
// Inisialisasi FilePond
const filePondElement = document.querySelector('input.filepond');
const initialFiles = @json($filePondFiles);
const pond = FilePond.create(filePondElement, {
files: initialFiles,
allowReorder: true,
allowMultiple: true,
acceptedFileTypes: [
'application/msword',
'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
'application/vnd.ms-excel',
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
'application/vnd.ms-powerpoint',
'application/vnd.openxmlformats-officedocument.presentationml.presentation',
'application/pdf',
'image/*',
'video/*',
'audio/*',
],
pdfPreviewHeight: 200,
pdfComponentExtraParams: 'toolbar=0&navpanes=0&scrollbar=0',
filePosterHeight: 150,
labelFileTypeNotAllowed: 'File type not allowed',
fileValidateTypeLabelExpectedTypes: 'Expects {allButLastType} or {lastType}',
});