Блог

Я пытаюсь настроить FilePond с помощью плагина ImagePreview, но, несмотря на то, что filepond явно загружает файлы, что-то перепутано, что приводит к появлению списка предварительного просмотра, состоящего только из серых квадратов. Даже имена изображений не видны, даже если данные изображения загружены правильно (например, правильное имя файла помещено в filepond--file-info-main интервал.), А элементы управления доступны для просмотра, но также невидимы.

Я предполагаю, что какой-то css мешает, но я уже пытался удалить как bootstrap, так и мой пользовательский стиль из моего проекта, и это ничего не изменило. Поведение для Filepond одинаково независимо от того, включены ли какие-либо плагины или нет (с плагином предварительного просмотра изображений серый элемент просто становится выше, я предполагаю, что это фиксированная высота).

CSS импортируется из filepond в vendor.js файл

 import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import '@fortawesome/fontawesome-free/css/all.min.css';
import 'filepond/dist/filepond.css'
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css';
  

Файловый файл инициализируется в конструкторе класса моего приложения (я также попытался переместить все из класса в vendor.js но это ничего не изменило):

 import * as FilePond from 'filepond';
import FilePondPluginFileEncode from 'filepond-plugin-file-encode';
import FilePondPluginFileValidateSize from 'filepond-plugin-file-validate-size';
import FilePondPluginImageExifOrientation from 'filepond-plugin-image-exif-orientation';
import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
export class FormComponentService {
    constructor(form) {
        if(typeof form !== "object" || !form.classList.contains("order-form")) { console.log("No correct form supplied"); return; }
        this.fieldsets = [...form.querySelectorAll('fieldset')];
        this.currentFieldSet = null;
        this.prevFieldSet = null;
        this.nextFieldSet = null;
        this.nextButtons = [...form.querySelectorAll(".next")];
        this.prevButtons = [...form.querySelectorAll(".previous")];
        this.initFormButtons();
        this.initFormComponents();
        FilePond.registerPlugin(
            // encodes the file as base64 data
            FilePondPluginFileEncode,
            // validates the size of the file
            FilePondPluginFileValidateSize,
            // corrects mobile image orientation
            FilePondPluginImageExifOrientation,
            // previews dropped images
            FilePondPluginImagePreview
        )
        this.pond = FilePond.create(
            document.querySelector('input[name=filepond]'), 
            {
                allowFileEncode: true,
            }
        )
    }
    //...
  

Я создал урезанную версию своего проекта в этом codesandbox:

https://codesandbox.io/s/flamboyant-swanson-sm87b

Повозившись с моим css в песочнице, я нашел свою проблему. Мой css содержал определенную часть, которая отвечала за изменение непрозрачности наборов полей, в которых находился ввод файла filepond. Это просочилось в CSS Filepond и привело к тому, что для каждого содержимого было установлено значение opacity:0 . Это был оригинальный стиль:

 #msform fieldset.active { opacity: 1; }
#msform fieldset {
    opacity: 0;
    position: absolute;
    box-sizing: border-box;
    border: 0;
    border-radius: 0;
    width: 100%;
    padding-bottom: 20px;
    margin: 0;    
}
  

Ключевым моментом было изменение #msform fieldset на #msform > fieldset .

Будьте осторожны при настройке непрозрачности форм / наборов полей, содержащих filepond.