Using rahulhaque FilePond in Edit form

[DevMushref]

Dears, I was reading this guide https://laraveldaily.com/post/laravel-filepond-guide how how to use filepond in the edit form (fetching uploaded images using load).

Since I'm new to Filepond, I am facing a major problem of how to use it in edit form. This is my code block used in the "Create new report" form:

// Register FilePond plugins
FilePond.registerPlugin(
    FilePondPluginFileValidateType,
    FilePondPluginImageEditor,
    FilePondPluginFilePoster
);

// Initilize Filepond
FilePond.setOptions({
    // For server
    server: {
        url: url, // url = "{{ config('filepond.server.url') }}"
        headers: {
            'X-CSRF-TOKEN': token, // token = "{{ @csrf_token() }}"
        },
    }
});

// Default FilePond field
const pondDefault = FilePond.create(document.querySelector('input[name="attachments[]"]'), {
    /* FilePond properties */
    allowReorder: true,
    filePosterMaxHeight: 256,
    chunkUploads: true,
});

For uploading new images, it's working as expected but I am totally lost of how to use this same code block in case of Editing (Find and delete old images, replace with new uploaded images.). From where do I start?

[rahulhaque]

@DevMushref at first, can you confirm that the tutorial you mentioned is using this package as it is for premium users and I am unable to read the whole thing. However you can do all the things mentioned in the title using this package as well.

For your first question, you have to read about the filepond's load method and its implementation in the official filepond documentation because it varies with use cases. That's why this package doesn't support the load endpoint out of the box.

I am a bit confuse about your second question as it doesn't specify any issue. Implying that you're asking for a suggestion on how to use it in edit form without load endpoint, I would say show the previous file anyway you prefer in an img tag or anything in the edit form and then after put the filepond input. This way you don't need the load method. The implementation is same as your create form. However you can move the registerPlugin and setOptions to master template. After form submission you receive the new file (if uploaded) and do whatever you want with it.

[DevMushref]

Apologies for the late reply...

The tutorial mentioned doesn't use this package, it uses the vanilla JS FilePond.

For the edit form, this was the code block provided:

const pond = FilePond.create(inputElement, {
    acceptedFileTypes: ['image/*'],
    server: {
        load: (source, load, error, progress, abort, headers) => {
            const myRequest = new Request(source);
            fetch(myRequest).then((res) => {
                return res.blob();
            })
                .then(load);
        },
        process: '{{ route('upload') }}',
        revert: '{{ route('revert') }}',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    },
    files: [
        {
            source: '{{ Storage::disk('public')->url($task->image) }}',
            options: {
                type: 'local',
            },
        }
    ],
});

As you can see, to we added new server -> load parameter which loads all images from the request.

Also added a new files option. Important part is to set type: 'local'. This tells FilePond that file is local and doesn't need to be uploaded.

I just need tips of how to use the above code block with this package? I tried changing the source url but I get ltrim(): Argument #1 ($string) must be of type string, array given error.

[rahulhaque]

I don't know how to help you in this case as the issue you've mentioned is out of this package's scope. I don't use this plugin or handle files the way they suggested. After seeing the above code, I can only ask you to check if source file url is accessible from browser.

[iamB0rgy]

Apologies for the late reply...

The tutorial mentioned doesn't use this package, it uses the vanilla JS FilePond.

For the edit form, this was the code block provided:

const pond = FilePond.create(inputElement, {
    acceptedFileTypes: ['image/*'],
    server: {
        load: (source, load, error, progress, abort, headers) => {
            const myRequest = new Request(source);
            fetch(myRequest).then((res) => {
                return res.blob();
            })
                .then(load);
        },
        process: '{{ route('upload') }}',
        revert: '{{ route('revert') }}',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    },
    files: [
        {
            source: '{{ Storage::disk('public')->url($task->image) }}',
            options: {
                type: 'local',
            },
        }
    ],
});

As you can see, to we added new server -> load parameter which loads all images from the request.
Also added a new files option. Important part is to set type: 'local'. This tells FilePond that file is local and doesn't need to be uploaded.

I just need tips of how to use the above code block with this package? I tried changing the source url but I get ltrim(): Argument #1 ($string) must be of type string, array given error.

Hey @DevMushref , here's my code I used in Edit Mode. hope this helps.

` const multiInputElement = document.querySelector('#recipe_images');

        const multiPond = FilePond.create(multiInputElement, options);

            multiPond.setOptions({
            allowImagePreview: true,
            acceptedFileTypes: ['image/*'],

            server: {

                process: {
                    url: '{{ route('tmpUploadRecipeImages') }}',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                },
                revert: {
                    url: '{{ route('tmpDeleteRecipeImages') }}',
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        '_method': 'DELETE',
                    },
                },
                restore: '{{ route('tmpRestoreRecipeImages') }}',
                load: (uniqueFileId, load) => {
                // you would get the file data from your server here
                fetch(uniqueFileId)
                    .then(res => res.blob())
                    .then(load);
                },
            },
            files: [
                    {
                        source: 'http://192.168.1.68/public/upload/13/recipe/8/recipe_images/6396f30dd2e82-1670837005/6396f30dd2e7e1670837005.jpg',
                        options: {
                            type: 'local',
                        }
                    },
                ]
        });`