File Preview in React FilePond not showing up when setting initial file

Question

I've been struggling quite a bit with React filepond lately so I just need some help. So, I'm able to upload photos to the server with react filepond with rails backend and amazon s3 storage. Everything works, no issue. Now I'm trying to set an initial image but I'm having issues getting the preview to work.

So, here I'm setting the initial image from a publicly accessible placeholder image:

class UserForm extends Component {
  constructor(props) {
    super(props);
    this.classes  = props.classes;    
    this.state = {     
      files: [{
        source: "https://picsum.photos/200/300",   
        options: {
          file: {
            size: 200
          }
        } 
      }],    
    code omitted for brevity

and here's my FilePond component:

<FilePond
            ref={ref => (this.pond = ref)}
            files={this.state.files}
            allowMultiple={true}
            maxFiles={3}            
            oninit={() => this.handleInit()}
            onupdatefiles={ this.fileChange } 
            allowImageCrop={true}
            imageCropAspectRatio={'1:1'}
            allowImageResize={true}
            imageResizeTargetWidth={100}
            imageResizeTargetHeight={100}
            imageResizeUpscale={false}
            imageResizeMode={'contain'}
            allowImageTransform={true}               
            onpreparefile={ this.prepareFile }

So, its supposed to load the placeholder image in the preview but this is what I see instead:

Any configurations Im missing to get the preview to show up?

Thanks!

Edit 1 Added code sandbox link. Note that if I remove the options, specifically the file size, it will throw a warning saying that its waiting for the size

https://codesandbox.io/s/react-filepond-live-demo-8s7oc?file=/src/index.js

And here's the docs for setting up initial files in filepond: https://pqina.nl/filepond/docs/patterns/api/filepond-object/#setting-initial-files

Can you post a codesandbox link here with minimal reproducible code? — rzwnahmd
– rzwnahmd, Commented Apr 12, 2020 at 16:13
@rzwnahmd Added the link to it in my 1st edit. Please check it out :-) — Nigel
– Nigel, Commented Apr 12, 2020 at 16:42

Nigel · Accepted Answer · 2020-04-13 16:20:32Z

8

I figured it out! Here's a working code sandbox link: https://codesandbox.io/s/react-filepond-live-demo-2sdn0?file=/src/index.js

you need to set the server config like this:

<FilePond
        files={files}
        allowMultiple={false}
        server={{
          load: (source, load, error, progress, abort, headers) => {
            var myRequest = new Request(source);
            fetch(myRequest).then(function(response) {
              response.blob().then(function(myBlob) {
                load(myBlob);
              });
            });
          }
        }}
        labelIdle='Drag & Drop your files or <span class="filepond--label-action">Browse</span>'
      />

Credit goes to this asnwer from this link: https://github.com/pqina/filepond/issues/192

answered Apr 13, 2020 at 16:20

Nigel

1,0271 gold badge13 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

File Preview in React FilePond not showing up when setting initial file

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related