Destroy dynamically created filepond instance with vanila javascript

944 Views Asked by At

I have created filepond instance in my function which shows modal block with file upload feature. Now I need to destroy created instance on closing modal block, because I have case to call thet function for another uses with new filepond instance and parameters. Please advice how can I realize properly destoy dynamically created filepond instance;

Function initializing filepond:

const showUploader = () => {
    const pond = FilePond.create( inputElement, {
            acceptedFileTypes: ['image/png', 'image/jpeg', 'image/jpg','application/pdf'],
            instantUpload: true,
            /* other settings */
            server: {
                url: '/process.php?' + urlParams,
                process: {
                    onload: (response) => {
                        console.log(response);
                    },
                    onerror: (error) => {
                        console.log(error);
                    }
                },
                revert: {
                    onload: (response) => console.log(response),
                    onerror: (response) => console.log(response),
                },
                load: {
                    onload: response => { console.log(response); },
                    onerror: response => { console.log(response); },
                }
            }
        });
}

Function where I have to destroy it:

const closeUploader = () => {
   //TODO: Destroy created filepond instance
}

Thanks in advance!

1

There are 1 best solutions below

1
On

Use the FilePond.destroy method.

<intput type="file" name="filepond" required multiple>

<script>
const inputElement = document.querySelector('input[type="file"]');

// create the FilePond instance
FilePond.create(inputElement);

// destroy the FilePond instance by element reference
FilePond.destroy(inputElement);
</script>

You can also call destroy on the instance itself, in your situation that would be pond.destroy().

https://pqina.nl/filepond/docs/patterns/api/filepond-object/#destroying-a-filepond-instance