7

I use FilePond to show previously uploaded images with the load functionality. The files are visible, however I don't get a preview (which I get when uploading a file).

Should it be possible to show previews for files through load?

files: [{
    source: " . $profile->profileImage->id . ",
    options: {
        type: 'local',
    }
}],
Paul
  • 336
  • 1
  • 3
  • 11
  • That is possible, you have to define the `server.load` end point, it should return a file object https://pqina.nl/filepond/docs/patterns/api/server/#load – Rik Sep 24 '19 at 13:22
  • The load end point now points to a PHP method, returning an image blob. Do I have to create a JS function to put that blob into a File object? – Paul Sep 24 '19 at 13:36
  • No that should do the trick – Rik Sep 26 '19 at 06:39
  • Hm, then I might return the wrong data. It's PHP readfile() output, with the header set to inline, as mentioned in the docs. I see a filename and a file size, but no preview. Does that ring a bell as to what I'm missing? – Paul Sep 26 '19 at 08:20
  • Any ideas as to why the file size and name get displayed, but not the image itself? – Paul Oct 09 '19 at 18:45
  • 1
    No idea, it should do this: https://codesandbox.io/s/vanilla-filepond-preview-server-file-fo1k1 – Rik Oct 10 '19 at 07:23
  • I got it to work, thanks. Turned out I missed a content-type header :S. – Paul Oct 14 '19 at 09:11

1 Answers1

3

First you have to install and register File Poster and File Preview plugins and here is the example of how to register it in your code:

import * as FilePond from 'filepond';
import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
import FilePondPluginFilePoster from 'filepond-plugin-file-poster';
    
FilePond.registerPlugin(
    FilePondPluginImagePreview,
    FilePondPluginFilePoster,
);

then You have to set the server.load property to your server endpoint and add a metadata property to your files object which is the link to your image on the server:

const pond = FilePond.create(document.querySelector('file'));

pond.server = {
    url: '127.0.0.1:3000/',
    process: 'upload-file',
    revert: null,
    // this is the property you should set in order to render your file using Poster plugin
    load: 'get-file/',
    restore: null,
    fetch: null
};
pond.files = [
    {
        source: iconId,
        options: {
            type: 'local',
            metadata: {
                poster: '127.0.0.1:3000/images/test.jpeg'
            }
        }
    }
];

the source property is the variable you want to send to your end point which in my case I wanted to send to /get-file/{imageDbId}.

In this case it does not matter what your endpoint in the load property returns but my guess is, we have to return a file object.

VeRJiL
  • 415
  • 4
  • 13