Filepond adds authentication header before rendering image

Question

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

Answer 1

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