Adgower's avatar
Level 14

Livewire FilePond Clear after upload

I have the following which uploads a file fine:

<div>
    <button wire:click="upload" class="btn btn-primary">Upload</button>
    <input wire:model="newDocument" type="file">
    @error('newDocument')
    {{ $message }}
    @enderror
    <div wire:ignore x-data x-init="

        FilePond.setOptions({
            server: {
                process: (fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
                    @this.upload('newDocument', file, load, error, progress)
                },
                revert: (filename, load) => {
                    @this.removeUpload('newDocument', filename, load)
                },
            },
        });
this.addEventListener('pondReset', e => {
            FilePond.removeFile();
        });

    ">

        <input wire:model="newDocument" type="file" class="filepond">
    </div>

    <ul class="list-group">
        @foreach ($event->documents as $document)
        <li class="list-group-item d-flex justify-content-between align-items-center">
            <a wire:click.prevent="$emitTo('admin.courses.show-document', 'selectedDocument', '{{ $document->id }}')"
                href="#" target="_blank"><i class='far fa-file-pdf'></i>{{ $document->name }}</a>

            {{-- <span class="badge bg-primary rounded-pill">14</span> --}}
        </li>
        @endforeach
    </ul>
</div>

but it doesn't clear the input after upload. I assume it is because wire:ignore?

in my upload method I set $this->newDocument = NULL. I assume I need to somehow use alpine/js to do the same concept? Is this the right direction?

Thanks

UPDATE:

I found this link: https://forum.laravel-livewire.com/t/how-to-reset-filepond-input-file/1595

But when I run

FilePond.removeFile();

It says FilePond.removeFile is not a function...

https://pqina.nl/filepond/docs/patterns/api/filepond-instance/#removing-files

any tips?

UPDATE:

I found this https://forum.laravel-livewire.com/t/clear-out-filepone-files/2449/2

He says I need to set it equal to an instance of FilePond

when I do that I get same problem:

var pond = FilePond.create($refs.input);

still says .removeFiles is not a function

0 likes
1 reply
Adgower's avatar
Adgower
OP
Best Answer
Level 14

It's working now: I think it was a caching issue?

<div>
    <button wire:click="upload" class="btn btn-primary">Upload</button>
    {{-- <input wire:model="newDocument" type="file"> --}}
    @error('newDocument')
    {{ $message }}
    @enderror
    <div wire:ignore x-data x-init="

        FilePond.setOptions({
            server: {
                process: (fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
                    @this.upload('newDocument', file, load, error, progress)
                },
                revert: (filename, load) => {
                    @this.removeUpload('newDocument', filename, load)
                },
            },
        });
        var Pond = FilePond.create($refs.input);
        this.addEventListener('pondReset', e => {
            Pond.removeFiles();
        });


    ">

        <input wire:model="newDocument" type="file" x-ref="input">
    </div>

    <ul class="list-group">
        @foreach ($event->documents as $document)
        <li class="list-group-item d-flex justify-content-between align-items-center">
            <a wire:click.prevent="$emitTo('admin.courses.show-document', 'selectedDocument', '{{ $document->id }}')"
                href="#" target="_blank"><i class='far fa-file-pdf'></i>{{ $document->name }}</a>

            {{-- <span class="badge bg-primary rounded-pill">14</span> --}}
        </li>
        @endforeach
    </ul>
</div>

6 likes

Please or to participate in this conversation.