Image preview displayed at the wrong place when used inside a modal

[Naghal]

I am not sure if this is a bug or an error on my part, here is the preview: (Tested on chome 91)

How to reproduct: Install filepond 4.27.3 & filepond-plugin-image-preview 4.6.6 Import the packages and css

window.Filepond = require('filepond') 
import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
Filepond.registerPlugin(FilePondPluginImagePreview);

Include the style in the base layout app.blade.php

 <link rel="stylesheet" href="{{ asset('css/vendor.css') }}">
 <link rel="stylesheet" href="{{ asset('css/app.css') }}">
 <link rel="stylesheet" href="{{ asset('css/vendorcss.css') }}" defer>

Mix via webpack

mix.styles([
    nodeModule('select2/dist/css/select2.min.css'),
    nodeModule('quill/dist/quill.snow.css'),
    nodeModule('filepond/dist/filepond.min.css'),
    nodeModule('filepond-plugin-image-preview/dist/filepod-plugin-image-preview.css')
], 'public/css/vendorcss.css');

Add a file input to a bootstrap modal

<div class="modal" tabindex="-1" role="dialog" id="fileDocumentUploadModal">
    <form action="/files/{{$file->id}}/documents" method="POST" enctype="multipart/form-data">
        <div class="modal-dialog" role="document">
        <div class="modal-content" style="width:800px;">
                <div class="modal-header">
                <h5 class="modal-title">Documents</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                </div>
                <div class="modal-body">

                        @csrf
                        <input type="file" id="fileDocumentUploadInput" name="documents[]" multiple/>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">{{__('common.close')}}</button>
                    <button type="submit" class="btn btn-primary">{{__('common.save')}}</button>
                </div>
        </div>
        </div>
    </form>
</div>

<script>
$(document).ready(function() {
    const inputElement = document.querySelector('input[id="fileDocumentUploadInput"]');
    const pond = Filepond.create(inputElement, {
        maxFiles: 5,
        instantUpload: false,
        storeAsFile: true,
        maxFileSize: '5mb',
        locale: filepond_fr_labels,
        allowMultiple: true,
    });

    if (window.getCurrentLocale() == 'fr') {
        pond.setOptions(filepond_fr_labels);
    }
})
</script>

How can I get the preview image to display at the right place inside the filepond container?

[rikschennink]

It looks like the image preview css file isn’t loaded correctly. Please confirm the styles are actually there.

[Naghal]

Yes, there was a typo in myx.styles. Thanks!