0

I am working on a page where there is a configuration setup and a preview pane. I wish for filepond to provide the bitmap(blob?) image when an image is uploaded so that it can be displayed in the live preview creator pane div tag rather than the element(filepond) it is originally shown on, is this possible.

I am using vue-filepond

Swati Garg
  • 995
  • 1
  • 10
  • 21
Mark Hester
  • 1
  • 1

1 Answers1

1

You receive the file item in the onprocessfile callback. The file property contains the file object. You can use URL.createObjectURL and pass the returned URL to an image src to show the image.

Assuming you have an <img> on the page something like this should work.

const image = document.querySelector('img');
image.src = URL.createObjectURL(fileItem.file);

https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL

Rik
  • 3,328
  • 1
  • 20
  • 23