Filepond: onupdatefiles is called two times when using react-filepond

Created on 24 Mar 2019  路  6Comments  路  Source: pqina/filepond

Summary

The onupdatefiles function is called two times, when I add a file to the default filepond compontent.

How to reproduce

Import the react-filepond component.
Add function to onupdatefiles and log it to the console.
You will see it two times.

Expected behaviour

It only should be called one time.

Most helpful comment

Summary

The onupdatefiles function is called two times, when I add a file to the default filepond component.

How to reproduce

Import the react-filepond component.
Add function to onupdatefiles and log it to the console.
You will see it two times.

Expected behaviour

It only should be called one time.

To solve this you can call your custom functions or trigger whatever you want using the "onaddfile" callback, and you will get a very similar behaviour.

Source: https://pqina.nl/filepond/docs/print-version/#callbacks

export class DetailsCard extends Component {
    // ... 
    handleUpload() {
        // You can use here `this.pond.getFile().file`
        // and send (for example) the file to the HTTP client.
    }
    render() {
        return (
             // Your HTML code...
            <FilePond 
                ref={ref => (this.pond = ref)}
                onaddfile={() => this.handleUpload()}
            />
        )
    }

All 6 comments

I believe it's currently called twice so it's synced correctly when a file is rejected by one of the validation plugins. Will look into this, but for now, it manages to correctly sync the files list with a parent state ( in React, which is the main purpose of this method ).

When using filepond-jquery same thing happens.

It's run by the internal FilePond library so it will indeed happen everywhere. Will leave this as is for now.

Summary

The onupdatefiles function is called two times, when I add a file to the default filepond component.

How to reproduce

Import the react-filepond component.
Add function to onupdatefiles and log it to the console.
You will see it two times.

Expected behaviour

It only should be called one time.

To solve this you can call your custom functions or trigger whatever you want using the "onaddfile" callback, and you will get a very similar behaviour.

Source: https://pqina.nl/filepond/docs/print-version/#callbacks

export class DetailsCard extends Component {
    // ... 
    handleUpload() {
        // You can use here `this.pond.getFile().file`
        // and send (for example) the file to the HTTP client.
    }
    render() {
        return (
             // Your HTML code...
            <FilePond 
                ref={ref => (this.pond = ref)}
                onaddfile={() => this.handleUpload()}
            />
        )
    }

Above only works when you've uploaded only one file. I'm using onupdatefiles with the property allowMultiple: true (I'm trying to upload multiple files) .When i upload one file, it's rendering twice on console and so it would push two files in the array that i've created.

My current workaround to this problem is to remove the duplicated files. Hopefully there's a fix to this

@louiselumapas Indeed checking if the file is already in the array should suffice

Was this page helpful?
0 / 5 - 0 ratings