Allow image preview when using local?

[lukepass]

Hello, how can I add a file preview when using FilePondPluginFileEncode? I don't have server side methods and so when I am loading the initial files they cannot be loaded using the load method. Can I provide the previewUrl manually?

Thanks!

[rikschennink]

Encoding is only for sending files to the server. To preview local files you can do this:

FilePond.create({
  server: {
    load: (src, load) => {
      fetch(fileSrc).then(res => res.blob()).then(load);
    }
  }
})

[lukepass]

Thanks @rikschennink, this is almost working for me. I have the following starting files property:

[
    {options: {type: "local"}, source: 672}, // this is for FilePond.create
    {options: {type: "local"}, source: 673} // this is for FilePond.create
]

But since I don't implement the fetch method (I don't use server property at all thanks to FilePondPluginFileEncode) I need a method to get the URL to preview. I tried something like this:

[
    {options: {type: "local"}, source: {id: 672, url: 'mypreview.jpg'}}, // this is for FilePond.create
    {options: {type: "local"}, source: {id: 673, url: 'mypreview2.jpg'}}, // this is for FilePond.create
]

And then:

  load: function(source, load) {
    fetch(source.url).then((res) => res.blob()).then(load);
  },

But this is not working and giving me an error about "split". Maybe the source property can only be a string and not a complex object?

Thanks!

[rikschennink]

You could use the file-poster plugin? https://pqina.nl/filepond/docs/patterns/plugins/file-poster/

[lukepass]

Exactly what I was looking for, really thank you!

[rikschennink]

@lukepass fantastic, I'll close the issue then 👍

[lukepass]

@rikschennink sorry one last question, when using FilePoster the image is always very big. The previewer plugin instead is able to detect dimensions. How can I specify them with poster plugin?

I tried adding width and height (not documented, I just tried) but it didn't work.

Thanks!

EDIT: it seems related to these:

• https://github.com/pqina/filepond-plugin-file-poster/issues/7
• https://github.com/pqina/vue-filepond/issues/94

[rikschennink]

The post will always take up the entire item, at the moment that's the way it's designed.

[patrickvlt]

The post will always take up the entire item, at the moment that's the way it's designed.

That's unfortunate and unhelpful. How can we achieve the same functionality with ImagePreview?

[nehadhiman6]

Update: There are new props added.

filePosterHeight filePosterMinHeight filePosterMaxHeight

see here thanks @fratzinger