Error with fileupload and 2 filepond

#1

Hello

I’m not able to have 2 file upload working in a file, here is the architecture:

  • a blade file with 2 livewire call

<livewire:profile-picture >
<livewire:profile-allpictures >

in profile-picture.blade:

<x-filepond :inputname="'pict'" wire:model="file" />

in profile-allpictures.blade:

<x-input.filepond :inputname="'allpict'" wire:model="files" multiple />

the filepond component is the one available in surge

 <div
    wire:ignore
    x-data
    x-init="
        FilePond.registerPlugin(FilePondPluginImagePreview);
        FilePond.setOptions({
            allowMultiple: {{ isset($attributes['multiple']) ? 'true' : 'false' }},
            labelIdle:'Veuillez sélectionner un fichier',
            labelFileProcessingComplete: 'Upload terminé',
            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)
                },
            },
        });
        FilePond.create($refs.input);
    " >
    <input type="file" name="{{$inputname}}" x-ref="input">
 </div>

My issue is that i can correctly see the request with the answer; the model file (or files) is NULL even if the file is correctly uploaded (in livewire_tmp)
BUT i don’t have the livewire div updated…

I’ve added few livewire:key without any success…

Do you have any idea?

Christophe

#2

The only way I have gotten this to work, multiple filepond on a page, is to re-work the UI to never have more than one loaded filepond instance on the page at a time. In your case you’d only show profile-picture until that one has been uploaded, replace filepond for profile-picture with the uploaded photo, then you can load profile-allpictures filepond.

#3

I guess the issue is in livewire but dont know where…

#4

Hey Folks,

i just came across the same “problem”. But the solution is actually pretty easy and straight forward.

The thing is that you reset the global FilePond options with every instance. This is because of this:

FilePond.setOptions({
    allowMultiple: {{ isset($attributes['multiple']) ? 'true' : 'false' }},
    labelIdle:'Veuillez sélectionner un fichier',
    labelFileProcessingComplete: 'Upload terminé',
    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)
        },
    },
});

The solution is to change these option on the instance level, rather than the “global” level.

<div
    wire:ignore
    x-data="{pond: null}"
    x-init="
        FilePond.registerPlugin(FilePondPluginImagePreview);
        pond = FilePond.create($refs.input);
        pond.setOptions({
            allowMultiple: {{ isset($attributes['multiple']) ? 'true' : 'false' }},
            labelIdle:'Veuillez sélectionner un fichier',
            labelFileProcessingComplete: 'Upload terminé',
            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)
                },
            },
        });
">
    <input type="file" name="{{$inputname}}" x-ref="input">
</div>

Hope this helps you. If you got any questions, i’m happy to help!

2 Likes
Two file-pond components in the same page
#5

YES! I got this working thanks to you! You know, I almost had done this. I did something like the following which doesn’t make sense:

pond = FilePond.setOptions({...});
pond = FilePond.create($refs.input);

Not the correct way which you suggested:

pond = FilePond.create($refs.input);
pond.setOptions({...});

Thank you maxeckel!

#6

You are welcome! I’m glad i could help :wink: