Preloaded image Placeholder

[joaotomasrobalo]

Hello.

I have a node.js + Express server, and the only images that I have stored are the user profile pictures. Those images are stored on an Amazon S3 bucket. How can I open the user profile with the image loaded in the filepond widget?

I want to open the page with the FilePond input loaded in that state (with the user profile picture already loaded)

I have tried to set initial files but what is happening is that filepond loads a blank image and not the image I'm trying to get from Amazon S3

Thanks in advance!

[rikschennink]

Sounds like you have to implement the FilePond server.load end point

[joaotomasrobalo]

Sounds like you have to implement the FilePond server.load end point

Do I have to implement an endpoint in my server? I have the URL of the user profile picture (stored in an Amazon S3 bucket)

Can you give me an example on how to do it? I'm using jquery...
Thank you

[rikschennink]

I think something like this should work.

// where id is your S3 file URL
FilePond.create({
    server: {
        load: (id, load) => {
            fetch(id).then(res => res.blob()).then(load)
        }
    }
})

Please make sure the CORS headers for the files on S3 are configured properly

https://pqina.nl/filepond/docs/patterns/api/server/#load-1

[bt1]

Also make sure the access controls on the object are set correctly in s3. Literally spent a few hours on this yesterday.

[joaotomasrobalo]

I think something like this should work.

// where id is your S3 file URL
FilePond.create({
    server: {
        load: (id, load) => {
            fetch(id).then(res => res.blob()).then(load)
        }
    }
})

Please make sure the CORS headers for the files on S3 are configured properly

https://pqina.nl/filepond/docs/patterns/api/server/#load-1

The method is not being called... It doesn't fetch anything. Outside FilePond.create() it does fetch the image. However the code inside server.load is not being called

[rikschennink]

then your file probably does not have type local
https://pqina.nl/filepond/docs/api/instance/properties/#files

edit: updated link

[joaotomasrobalo]

File does not have type local? What does that mean?

I worked around it and added the file with _pond.addFile(file) right after the creation... It's a work around but it works...

[rikschennink]

It’s right in the docs that I linked to

[ViniciusGularte]

Same problem here, you managed to discover a solution @joaotomasrobalo ?

[joaotomasrobalo]

@ViniciusGularte I did. It's a workaround and not a perfect solution.

After the creation of the filepond object you fetch the img and add it to the object.
Like this:

   fetch(url).then(res => res.blob()).then(blob => {
            var file = new Blob([blob], {
                type: 'image/png'
            });
            fromLoad = true;
            _pond.addFile(file);
   })

If you can't make it work with this let me know...

[predam]

The "load" option from the server part is not working, or perhaps its scope is not documented enough.
Here is a workaround working for me to achieve the image preview.

const [state, setState] = useState([initialImageUrl]);
const [canUpload, setCanUpload] = useState(false);

const getServerConfig = () => {
  if(!canUpload) { return undefined}
  
  return {
  /// your code for server
  process: () => {}, // I usually use just the upload part.
  revert: () => setState(undefined), // use this if you want to have the revert button without triggering the DELETE request
  }
}

....

<FilePond 
  files={state}
  server={getServerConfig()}
  onaddfile={() => setCanUpload(true)}
  onupdatefiles={(data) => setState(data)}
/>

This implementation shows the initial image without triggering the upload.