Livewire and FilePond. Change image order

Question

I'm using Livewire and Filepond to allow users to upload images to a gallery.

I need my users to be able to set the order of the images and save that to the database.

Filepond has an option allowReorder: true and a callback that fires when the order has been changed onreorderfiles(files, origin, target)

Here is the basics of my upload component

<div
    x-data="{ 'images': null }"
    x-init="
        FilePond.registerPlugin(FilePondPluginImagePreview);
        FilePond.registerPlugin(FilePondPluginImageExifOrientation);
        FilePond.registerPlugin(FilePondPluginFileValidateType);
        FilePond.registerPlugin(FilePondPluginFileValidateSize);
        FilePond.registerPlugin(FilePondPluginImageResize);

        FilePond.setOptions({
            allowMultiple: true,
            allowReorder: true,
            server: {
                process: (fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
                    @this.upload('images', file, load, error, progress)
                },
                revert: (filename, load) => {
                    @this.removeUpload('images', filename, load)
                },
            },
            onreorderfiles(files, origin, target){
                // **** What do I  put here to update the order of the images in my livewire component? ******
            },
        });

        const pond = FilePond.create($refs.input, {
            acceptedFileTypes: ['image/png', 'image/jpeg'],
            maxFileSize: '7MB',
            allowImageCrop: true,
            allowImageResize: true,
            imageResizeTargetWidth: '1000px',
            imageResizeTargetHeight: '1000px',
        });

        pond.on('addfile', (error, file) => {
            if (error) {
                console.log('Oh no');
                return;
            }
            images = true;
        });
    "
>
    <div wire:ignore wire:key="images">
        <div x-show="images == null" class="ex-builder-no-images">
            <i class="fas fa-image"></i>
            <p>There are no images for this experience.
                <br>Upload some below. <br><small>(MAX 10 Images)</small></p>
        </div>
        <div class="form-group text-center">
            <input
                id="image-upload"
                type="file"
                x-ref="input"
                multiple
            >
            @error('images.*')
            <p wire:key="error_images" class="mt-2 text-sm text-red-600" id="email-error">{{ $message }}</p>
            @enderror
        </div>
    </div>
</div>

I'm also showing a preview of the first image in the gallery (this is the gallery's featured image) like this <img src="{{ $images ? $images[0]->temporaryUrl() : '/images/placeholder.jpg' }}"> I'm expecting this image to update after the user drags a new image to be the first.

How can I update the image order in the public $images = []; found in my livewire componenet using the onreoderfiles() callback?

Thanks!

Answer 1

Not sure if this is correct, but it seems to work

I added this to FilePond.setOptions()

FilePond.setOptions({
                allowMultiple: true,
                allowReorder: true,
                server: {
                    process: (fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
                        @this.upload('images', file, load, error, progress)
                    },
                    revert: (filename, load) => {
                        @this.removeUpload('images', filename, load)
                    },
                },

                // Added this ----------------------------------------
                onreorderfiles(files, origin, target){
                    @this.set('images', null);
                    files.forEach(function(file) {
                        @this.upload('images', file.file);
                    });
                },
            });

This removes the previous uploaded images and reuploads with the new order.