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

Share Improve this question Follow asked Feb 28, 2019 at 14:53 josedaianjosedaian 6722 silver badges77 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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.