React FilePond Preview [ File Poster ] Not Working

Question

My FilePond Poster preview code not working, please help me find what i'm doing wrong.

i tried different variations of the code seen below but with no luck.

-i tried to enable instant Upload (didn't work)

import React, { Component, Fragment } from 'react';
import { FilePond, File, registerPlugin } from 'react-filepond';
import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css';
import FilePondPluginFilePoster from 'filepond-plugin-file-poster';
import 'filepond-plugin-file-poster/dist/filepond-plugin-file-poster.css';
import 'filepond/dist/filepond.min.css';
registerPlugin(FilePondPluginImagePreview, FilePondPluginFilePoster);

export default class MyFilePond extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
        };
    }
    handleInit() {
        console.log('FilePond instance has initialised', this.pond);
    }
    render() {
        return (
            <Fragment>
                <FilePond
                    ref={ref => (this.pond = ref)}
                    allowFilePoster={true}
                    instantUpload={false}
                    server={{}}
                    name="image"
                    acceptedFileTypes={['image/*']}
                    oninit={() => this.handleInit()}
                >
                    <File
                        file={{
                            name: 'my-file.png',
                            size: 3001025,
                            type: 'image/png'
                        }}
                        metadata={{poster : 'https://www.pngarts.com/files/3/Spongebob-Squarepants-Transparent.png'}}
                        source="https://www.pngarts.com/files/3/Spongebob-Squarepants-Transparent.png"
            />
                </FilePond>
            </Fragment>
        );
    }
}

Answer 1

Are you sure you can access the file on the remote server without setting CORS headers? I expect your developer console is showing a security warning.

Answer 2

If you keep getting CORS error like my case, you can try this hack: + Clone the poster plugin and make it your own plugin. + In the source code of poster plugin find and remove this line: img.crossOrigin = 'Anonymous';

Answer 3

Please Follow the Filepond Structure Mention Below,

FilePond.create(el, {
    files: [
        {
            source:1234,
            options: {
                type: 'local',
                file: {
                    name: 'my-file.png',
                    size: 1234,
                    type: 'image/png'
                },
                metadata:{
                    poster: 'https://i.imgur.com/hRliFiT.jpg'
                }
            }
        }
    ]
});