Как определить исходное изображение, предварительно загруженное в filepond?

Я делаю общий вид редактирования записи, с которой связано изображение, и мне нужно, чтобы оно отображалось предварительно загруженным во входной файл, так что если вы отправляете, то же изображение отправляется, или если вы хотите изменить это.

 // 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/',''),
                }
            }
        }
    ]
});

Теперь это показывает, как это

Но я должен показать таким образом

1 ответ

У меня была такая же проблема, исправил ее следующим образом:

/*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 */
        }
    ]
});

Согласно документации в разделе "Настройка исходных файлов"

Если вы имитируете данные файла, FilePond не будет загружать реальный файл, а плагин предварительного просмотра изображения не будет иметь никаких данных для показа файла.

Убедитесь, что ваш server.load конечная точка возвращает объект файла.

Другие вопросы по тегам