Filepond preview empty / invisible even though files are loaded

Question

I'm trying to set up FilePond with its ImagePreview Plugin but even though filepond clearly loads the files something is messed up which results in a preview list that consists of only grey squares. Not even the image names are visible, even though the image-data is loaded correctly (e.g. the correct file name is put in the filepond--file-info-main span.) and the controls are clickable but also invisible.

I assume some css is interfering but I already tried removing both bootstrap and my custom styling from my project and it didn't change anything. The behaviour is the same for Filepond no matter whether there are any plugins enabled or not (with the image preview plugin the grey item just becomes taller, I assume it's a fixed height).

The css is imported from filepond in a vendor.js file

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';

Filepond is initialized in a class constructor of my app (I also tried moving everything out of the class into the vendor.js but that didn't change anything):

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,
            }
        )
    }
    //...

I have created a stripped-down version of my project in this codesandbox:

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

Answer 1

After fiddling around with my css in the sandbox I've found my problem. My css contained a certain part that was responsible for changing the opacity of the fieldsets the filepond file input was located in. It trickled down into the CSS of Filepond and caused every content to be set to opacity:0. This was the original styling:

#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;    
}

Changing #msform fieldset to #msform > fieldset was the key.

Be careful when styling the opacity of forms/fieldsets that contain filepond.