How can I prevent FilePond creating overlay for success, idle, and failure all at once?

Question

I've enabled image preview for my FilePond component using the image preview plugin. However, when uploading an image the preview has overlays created for when it's successful, idle, or fails which causes the image preview to be pushed down out of the container (as shown in the picture). Here's a list of other plugins I'm using and my FilePond configuration.

Additional plugins:

• Image EXIF Orientation
• File Size Validation
• File Type Validation
• Image Transform
• File Metadata
• Image Resize

FilePond configuration:

document.addEventListener('DOMContentLoaded', function(event) {
  gopond();
})

function gopond() {

  FilePond.registerPlugin(
    FilePondPluginImageExifOrientation,
    FilePondPluginFileValidateSize,
    FilePondPluginFileValidateType,
    FilePondPluginImageTransform,
    FilePondPluginFileMetadata,
    FilePondPluginImageResize,
    FilePondPluginImagePreview,
  );

  var uploadedFiles = [];

  const pond = new FilePond.create(document.querySelector("#filepond"), {
    maxFiles: 12,
    credits: false,
    allowMultiple: true,
    allowFileEncode: true,
    allowPaste: false,
    allowRemove: false,
    allowRevert: false,
    allowFileMetadata: true,
    allowImageTransform: true,
    allowImageResize: true,
    allowImagePreview: true,
    imageResizeTargetWidth: '1200px',
    imageResizeTargetHeight: '675px',
    imageResizeMode: 'cover',
    maxFileSize: "30MB",
    acceptedFileTypes: [
      'image/png',
      'image/jpeg',
      'image/jpg',
      'video/mp4',
      'video/mov'
    ],
    fileMetadataObject: {
      markup: [
        [
          'rect',
          {
            left: 0,
            right: 0,
            bottom: 0,
            height: '85px',
            backgroundColor: 'rgba(55, 65, 81, 0.15)',
          },
        ],
        [
          'image',
          {
            right: '10px',
            bottom: '0px',
            width: '333.33px',
            height: '94.33px',
            src: 'https://headturned-public.s3.eu-west-2.amazonaws.com/logo/headturned-linear.png',
            fit: 'contain',
          },
        ],
      ],
    },
    server: {
      timeout: 30000,
      process: function(fieldName, file, metadata, load, error, progress, abort) {
        var xhr = new XMLHttpRequest();
        var formData = new FormData();
        fetch("/signer", {
            headers: {
              "Content-Type": "application/json",
              "Accept": "application/json",
              "X-Requested-With": "request",
              "X-CSRF-Token": "{{ csrf_token() }}",
            },
            method: "post",
            credentials: "same-origin",
            body: JSON.stringify({
              fileName: metadata.fileInfo.filenameWithoutExtension,
              fileExtension: metadata.fileInfo.fileExtension,
              fileType: metadata.fileInfo.fileType
            })
          })
          .then(function(response) {
            return response.json();
          })
          .then(function(json) {
            file.additionalData = json.additionalData;
            for (var field in file.additionalData) {
              formData.append(field, file.additionalData[field]);
            }

            formData.append("file", file);

            xhr.upload.onprogress = function(e) {
              progress(e.lengthComputable, e.loaded, e.total);
            };
            xhr.open("POST", json.attributes.action);
            xhr.onload = function() {
              load(`${ file.additionalData.key }`);
            };
            xhr.send(formData);
            uploadedFiles.push(file.additionalData.key);
          });
        return {
          abort: (function() {
            xhr.abort();
            abort();
          })
        };
      }
    }
  });

  pond.on("addfile", function(error, file) {
    if (error) {
      return;
    }
    file.setMetadata('fileInfo', {
      filenameWithoutExtension: file.filenameWithoutExtension,
      fileExtension: file.fileExtension,
      fileType: file.fileType
    });
  });

  pond.on("processfiles", function() {
    Livewire.emit('storeImages', uploadedFiles)
  })
}

<html>

<head>

  <link href="https://unpkg.com/filepond@^4/dist/filepond.css" rel="stylesheet" />

</head>

<body>

  <input type="file" id="filepond" multiple />

  <script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js"></script>
  <script src="https://unpkg.com/filepond-plugin-image-exif-orientation/dist/filepond-plugin-image-exif-orientation.js"></script>
  <script src="https://unpkg.com/filepond-plugin-image-resize/dist/filepond-plugin-image-resize.js"></script>
  <script src="https://unpkg.com/filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.js"></script>
  <script src="https://unpkg.com/filepond-plugin-file-validate-size/dist/filepond-plugin-file-validate-size.js"></script>
  <script src="https://unpkg.com/filepond-plugin-file-metadata/dist/filepond-plugin-file-metadata.js"></script>
  <script src="https://unpkg.com/filepond-plugin-image-transform/dist/filepond-plugin-image-transform.js"></script>
  <script src="https://unpkg.com/filepond@^4/dist/filepond.js"></script>

</body>

</html>

Image of the issue when uploading images:

Image of code from inspect element:

Answer 1

It looks like the CSS file included with the image preview plugin is not loaded.