How to populate FilePond with File object

Question

Hello I have a FilePond instance:

<FilePond
    ref={ref => this.pond = ref}
    oninit={() => this.handleInit() }
    onupdatefiles={(files) => this.props.setFile(files[0])}
/>

When you upload a file it calls setFile() which saves it to the state of the parent component. From there I am trying to add this file uploaded to a different FilePond instance that is also a child of the parent component this is being set to. Here is how I am currently trying this:

<FilePond
    ref={ref => this.pond = ref}
    oninit={() => this.pond.addFile(this.props.chosenFile) }
/>

So here's the flow of the file object

CHILD1 --Set file in state--> PARENT --Pass down file--> CHILD2

Here is what CHILD2's filepond looks like after setting it

Here is the file object being passed around

Here is an error I see in the console

I've read the docs and they don't seem to have an example of populating a FilePond with a file object they give you. I have been stuck on this for a while any help would be awesome. Thank you!

Rik · Accepted Answer · 2018-12-19 09:57:00Z

1

Author of FilePond here, I'm not sure this is related to FilePond itself but I thought I'd give it a shot.

It seems both ponds set this.pond as a reference, I guess as both have the same parent component they should each have a unique reference.

answered Dec 19, 2018 at 9:57

Rik

3,6061 gold badge27 silver badges27 bronze badges

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

Collectives™ on Stack Overflow

How to populate FilePond with File object

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related