How to resize preview image using FilePond in Laravel?

Question

Currently I can only set the height using the imagePreviewHeight property.

<script>
    FilePond.registerPlugin(
        FilePondPluginImagePreview,
        FilePondPluginImageResize
    );

    const competitionInputElement = document.querySelector('input[id="competitionImage"]');
    const rewardInputElement = document.querySelector('input[id="rewardImage"]');

    const competitionPond = FilePond.create(competitionInputElement,{
        imageResizeMode : 'force',
        imagePreviewHeight : 200,
        
    });
    const rewardPond = FilePond.create(rewardInputElement);

    FilePond.setOptions({
        server: {
            url: '/competition-upload',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        }
    });
</script>

But I need to set the width as well. Even if the image gets stretched.

Answer 1

If mean resizing the image visually on the page then the image preview will be scaled to max the width of its container which is most likely the FilePond element.

If mean about actually resizing the image data, then you need to load the FilePond Image Transform plugin which applies transformations to the image.