CODEWITHSUNDEEP
filepond
Mark Hester
Mark Hester

Reputation: 1

How to get the image blob from filepond for other components in vue

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

Upvotes: 0

Views: 1281

Answers (1)

Rik
Rik

Reputation: 3606

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

Upvotes: 1

Related Questions