I am using filepond plugin in my Vue application. It fits my application requirements perfectly. Currently my backend service is serving images via JWT authentication. How to add custom header to file pool to load images in component?
Here are my achievements
<file-pond ref="file" name="filepond" :label-idle="placeholder" accepted-file-types="image/jpeg, image/png" drop-validation="true" style-panel-layout="compact circle" style-button-remove-item-position="center bottom" style-panel-aspect-ratio="1:1" :allow-image-crop="true" image-crop-aspect-ratio="1:1" :files="src" :server="{ url: 'http://192.168.0.100', load: { url: './process', method: 'GET', headers: { 'x-customheader': 'Hello World' }, withCredentials: false } }" />
Even after installing the component, the server options still don't get called and my images throw 401 errors
This is what you are looking for. In order to render a remote image url, you need to provide it with an additional image attribute, in this case
local
.Read more here - https://pqina.nl/filepond /docs/api/instance/properties/#files