Filepond integration with livewire dosen't shows progressBar in percentage like 1% to 100%

Question

I have integrated Filepond in my project, am getting a problem when I upload a file it doesn't show its progress from 1 % to 100% but other things work well and the image view also with no problem. Filepond working fine only issue is that when we upload file in livewire component it doesn't show upload progress in percentage. And I am also using same in my controller which is working fine and also showing a progress in percentage.

Initialization with Alpinjs code:

<div class="col-md-12 pb-3 filepond-box">
@if($label)
    <x-form.label name="{{ $name }}" label="{{$label}}" class="col-form-label"></x-form.label>
@endif

<div
    class="col-md-12"
    wire:ignore
    x-data
    x-init="
    () => {
        const pond = FilePond.create($refs.filepond)

        pond.setOptions({
            filePosterMaxHeight:256,
            maxFileSize:'10MB',
            allowMultiple:true,
            server: {
                headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                },
                @isset($_instance)
                process:(fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
                    @this.upload('{{ $attributes->whereStartsWith('wire:model')->first() }}', file, load, error, progress)
                },
                @else
                process: '/file-upload',
                @endisset

                @isset($_instance)
                revert: (filename, load) => {
                    @this.removeUpload('{{ $attributes->whereStartsWith('wire:model')->first() }}', filename, load)
                },
                remove: (source, load, error) => {
                    @this.remove('{{ $attributes->whereStartsWith('wire:model')->first() }}',source);
                    load();
                },
                @endisset
                load: (source, load, error, progress, abort, headers) => {
                    var myRequest = new Request(source);
                    fetch(myRequest).then(function(response) {
                      response.blob().then(function(myBlob) {
                        load(myBlob)
                      });
                    });
                }
            },
            files: {{$files}}
        });
    }"
>
    <input type="file" x-ref="filepond" name="{{$name}}" {{$attributes}}/>
</div>

<x-form.error field="{{ $attributes->whereStartsWith('wire:model')->first() }}"></x-form.error>

@if($tooltip)
    <div class="file-pond-doted-box-tooltip">
        {{$tooltip}}
        <div class="file-pond-doted-box-tooltip-arrow"></div>
    </div>
@endif

Answer 1

You need to call the progress method with livewire's progress event like below.

process: (fieldName, file, metdata, load, error, progress, abort,transfer, options) => {  
    @this.upload('upload', file, load, error, (event) => {
        progress(event.detail.progress, event.detail.progress, 100);})
    },