Filepond add auth header before rendering the image-CodePudding

I am using filepond plugin in my Vue app. It fits well with my apps requirement. Currently my backend services are serving images over JWT Authentication. How can I add custom header to the filepond to load the image in the component?

Below is what I have achieved

<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 the component is mounted still the server options is not called and my image is throws a 401 error

CodePudding user response：

This is what you are looking for. In order to render remote image url, you need to supply it with extra image properties, in this case local.

Read here in details - https://pqina.nl/filepond/docs/api/instance/properties/#files

<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="[
      {
        source: 'http://your-image-url',
        options: {
           type: 'local'
        }
      }
    ]"
    :server="{
      url: 'http://192.168.0.100',

      load: {
        url: './process',
        method: 'GET',
        headers: {
          'x-customheader': 'Hello World'
        },
        withCredentials: false
      }
    }"
  />