Filepond Resize In Laravel Livewire

Question

If i got to this point I honestly skimmed and tried every example possible. My other option is to use intervention but if this is an option in file pond it should work.

I honestly needs a new set of eye as maybe I am missing something.

The Problem

The issues is that files are not saved as resized. They are still saved as full size uploads. I am trying to resize all images to 600x600 but when i load a 2mb file 1600x1000 it will not resize it. The files saves but in original format.

Issues 2 This one is new the first images uploaded will disaster from the preview but if i save it will save it. This one is been driving me crazy.

My Blade File

 <x-filepond wire:model="photos"  multiple/> 

FilePond Component

 <div 
     
            wire:ignore
    
            x-data=""
            x-cloack
            x-init="
                        FilePond.registerPlugin(FilePondPluginImagePreview , FilePondPluginImageResize);
                        allowMultiple: {{ isset($attributes['multiple']) ? 'true' : 'false' }},
                        FilePond.setOptions({
                
                            server: {
                                process:(fieldName, file, metadata, load, error, progress, abort, transfer, options) =>{
                                    @this.upload('{{ $attributes['wire:model']}}', file, load, error, progress)
                                },
                
                                revert: (filename, load) => {
                                    @this.removeUpload('{{ $attributes['wire:model'] }}', filename, load)
                                },
                            },

                            
                
                        });

                        const  pond = FilePond.create($refs.input,{
                            acceptedFileTypes: ['image/png', 'image/jpeg', 'image/jeg'],
                            imagePreviewHeight: 270,
                            allowImageResize: true,
                            imageResizeTargetWidth: 600,
                            imageResizeTargetHeight: 600,
                            imageResizeMode: 'contain',
                            imageResizeUpscale: 'false',

                        });

                        this.addEventListener('pondReset', e => {
                            pond.removeFiles();
                        });           
    
            " 
       
            >
            
            <input type="file" x-ref="input">

Livewire Component

public $photos = [];

....

   if($this->photos){
            foreach ($this->photos as $photo) {
                $storedImageUrl = $photo->store('photos');
                $photos = new Images;
                $photos->url = $storedImageUrl;
                $photos->post_id = $post->id;
                $photos->save();
            }

        }

Answer 1

You have to register the image-transform plugin to apply the changes.

The resize plugin only calculates the required size changes. This is a separate plugin because some developers want to apply the changes on the server.

<div wire:ignore
     x-data=""
     x-cloack
     x-init="FilePond.registerPlugin(
         FilePondPluginImagePreview, 
         FilePondPluginImageResize, 
         FilePondPluginImageTransform <--
     );