react-filepond

react-filepond copied to clipboard

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!

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

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

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

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

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

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

edit: updated link

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...

It’s right in the docs that I linked to

Same problem here, you managed to discover a solution @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...

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.