How to load default image in FilePond

user_7073918 0
Viewed 603

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'",
        ]);
    }
filepond laravel
1 Answers

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

user_127359810
Related