I'm doing a laravel view of the editing of a record, which has an image associated with it, and I need it to appear preloaded inside the input file, so that if you submit, the same image is sent, or if you want to change it.

 // Turn input element into a pond
FilePond.registerPlugin(
    FilePondPluginFileEncode,
    FilePondPluginImagePreview,
    FilePondPluginImageExifOrientation,
    FilePondPluginFileValidateSize
);
var imagen = '{{ trim($marca->imagen_asociada) }}'
const inputElement = document.querySelector('input[type="file"]');

FilePond.setOptions({
    server: {
        load: imagen.replace('/images/button/','')
    }
});
const pond = FilePond.create(inputElement,{
    files: [
        {
            source: '{{ public_path().'/resources'.trim($marca->imagen_asociada) }}',
            options: {
                type: 'local',

                // mock file information
                file: {
                    name: imagen.replace('/images/button/',''),
                }
            }
        }
    ]
});

Now it shows like this

But I should show in this way

I'm doing a laravel view of the editing of a record, which has an image associated with it, and I need it to appear preloaded inside the input file, so that if you submit, the same image is sent, or if you want to change it.

 // Turn input element into a pond
FilePond.registerPlugin(
    FilePondPluginFileEncode,
    FilePondPluginImagePreview,
    FilePondPluginImageExifOrientation,
    FilePondPluginFileValidateSize
);
var imagen = '{{ trim($marca->imagen_asociada) }}'
const inputElement = document.querySelector('input[type="file"]');

FilePond.setOptions({
    server: {
        load: imagen.replace('/images/button/','')
    }
});
const pond = FilePond.create(inputElement,{
    files: [
        {
            source: '{{ public_path().'/resources'.trim($marca->imagen_asociada) }}',
            options: {
                type: 'local',

                // mock file information
                file: {
                    name: imagen.replace('/images/button/',''),
                }
            }
        }
    ]
});

Now it shows like this

But I should show in this way

• javascript
• jquery
• filepond

2 Answers 2

I had the same problem, fixed it by this:

/*FilePond.setOptions({
    server: {
        load: imagen.replace('/images/button/','')
    }
}); Remove this.*/
const pond = FilePond.create(inputElement,{
    files: [
        {
            source: '{{ public_path().'/resources'.trim($marca->imagen_asociada) }}',
            /*options: {
                type: 'local',

                // mock file information
                file: {
                    name: imagen.replace('/images/button/',''),
                }
            } - Remove this options {} dictionary */
        }
    ]
});

According to documentation Under Setting Initial Files

If you mock the file data FilePond won't load the actual file and the image preview plugin won't have any data to show the file.

Make sure your server.load endpoint returns a file object.