How can we have a preview image at init with an existing image ?

[Wifsimster]

Hi.

I'm working on a profil image and i initialize the filepond instance with the current image but the preview is not displayed ?

I read nothing on the documentation about init with a existing image, so is there a solution to do that ?

For the moment, i initialize my instance in the load process with a Blob.

[Rik]

You can set the initial files using the files property.
https://pqina.nl/filepond/docs/patterns/api/filepond-object/#setting-initial-files

If you've registered the image preview plugin it should automatically preview the file.

[Wifsimster]

Ok, thanks for the fast reply. This is actualy what i'm doing with a local path, triggering the load method.

In the load method, i'm calling the server to get my file (sendFile() with express on node.js), all good at this point. I'm loading my file through a new Blob([response.data]) and filepond load the file but without the image preview.

[Rik]

Does your blob have type image/jpeg?

[Wifsimster]

Yes, it does.

response is my HTTP response from the server. data and headers are well valued.

load(
  new Blob([response.data], {
    type: response.headers["content-type"]
  })
)

[Rik]

Can you supply a public test case

[Wifsimster]

I just make it work simplifying my load method with the object configuration.

Thank for the help, appreciate !

[Rik]

Glad to hear that, maybe share the solution so it might be a helpful issue for other devs?

[Wifsimster]

Sure !

My files property :

this.files = [{ source: this.imagePath, options: { type: "local" } }];

And my working server configuration for init :

{
  url: `${this.API_URL}api/file`,
  [...]
  load: {
    url: `?path=`,
      method: "GET",
      headers: {
        authorization: `Bearer ${localStorage.getItem("token")}`
      }
    }
}

[Sandeep Ramgolam]

@Wifsimster @rikschennink

I hit the same issue. I'm providing it with the already uploaded image path, but there's no preview. It does load the 'filename' and 'filesize' though.

my files property :

  let initialFile = {
      source: this.imagePath,
      options: {
        type: 'local',
      },
    };

    this.files = [initialFile];

The filesize indicated is 2kb, and is not correct.

I also added a simple img tag above filepond and gave it the same image path. That one loads, suggesting that the image link is correct and accessible.

When I drag and drop an image on the filepond widget, i get an image preview. So i'm guessing the Image Preview Plugin is also correctly installed.

Any idea what i might have missed?

[Rik]

@MrSunshyne Have you configured the server.load endpoint?

[Sandeep Ramgolam]

@rikschennink

wow. that did it!

server: {
        load: '/',
}

To be honest when I read the replies about server load config and server configuration in the docs, I thought these were supposed to be done on the server(backend). My bad.

It works now. Thanks !

[Rik]

@MrSunshyne fantastic, glad to hear that!

[Andra Avram]

I am getting files from the server and populating the files object; in the DOM i see a hidden input with value of my image url but the preview doesnt show my file.