search

Home  >  Q&A  >  body text

Filepond adds authentication header before rendering image

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

P粉201448898P粉201448898320 days ago522

reply all(1)I'll reply

  • P粉378264633

    P粉3782646332024-03-28 00:25:14

    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

    reply
    0
  • Cancelreply