Filepond adds authentication header before rendering image
P粉201448898
P粉201448898 2024-03-27 13:06:23
0
1
437

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粉201448898
P粉201448898

reply all(1)
P粉378264633

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

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template