Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Atoagustyn's avatar

Show uploaded file in edit form using filepond

Please I have a form that is able to upload files successfully using file pond but how do I show the uploaded file in file pond when I want to edit because I always have to reupload again?

class Edit extends Component
{
    public $upload;
    public function mount(Upload $upload)
    {
        $this->file_name = $contract->file_name;
    }

    public function save()
    {
        $validatedData = $this->validate([
            'file_name' => "required|mimes:pdf|max:12288",
        ]);

        $upload = Upload::create([
            'file_name' =>  $this->file_name->store('public/files'),
        ]);

        $this->contract->update($validatedData);
        session()->flash('success', 'Edited successfully');
        return redirect()->route('home');
    }

    public function render()
    {
        return view('livewire.edit');
    }
}
 <div class="col-6@md">
    <label class="form-label margin-bottom-xxs" > File Upload </label>
    <div wire:ignore x-data x-init="FilePond.registerPlugin(FilePondPluginFileValidateType);
    FilePond.setOptions({
        server: {
            process: (fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
                @this.upload('file_name', file, load, error, progress)
            },
            revert: (filename, load) => {
                @this.removeUpload('file_name', filename, load)
            }
        },
        allowMultiple: true,
        allowFileTypeValidation: true,
    });
    FilePond.create($refs.input);">
        <input wire:model="file_name"
            class="form-control width-100% @error('file_name') is-error @enderror"  type="file" x-ref="input" id="file_name">
    </div>
    @error('file_name')
        <x-validation-error>{{ $message }}</x-validation-error>
    @enderror
</div>
<button wire:click.prevent="save" class="btn btn--primary">Save changes</button>


0 likes
7 replies
azizbek29's avatar

Hi. Did you find the solution? I can't find it.

Atoagustyn's avatar

@anuzpandey here is a link to the repository I created a dashboard with on GitHub you can check the code on how implemented this.

Hasith's avatar

You can use Filepond's inbuilt plugin to preview uploaded files with uploading percentage indicator This is custom built component. Just create file-pond.blade.php file on your views/components folder Then paste this code. Do not forget to add plugin's JS CDN. you can get that from the filepond doc. usecase => <x-file-pond wire:model="attachments" multiple />

<div class="mt-1" x-data x-init="FilePond.registerPlugin(FilePondPluginImagePreview);
FilePond.registerPlugin(FilePondPluginFileValidateType);
FilePond.registerPlugin(FilePondPluginImageCrop);
const acceptAttr = '{{ isset($attributes['accept']) ?? '' }}';
const acceptedFileTypes = acceptAttr ? acceptAttr.split(',') : [];
FilePond.create($refs.input);
FilePond.setOptions({
    allowMultiple: {{ isset($attributes['multiple']) ? 'true' : 'false' }},
    imageCropAspectRatio: '1:1',
    maxFiles: {{ isset($attributes['max']) ? $attributes['max'] : '10' }},
    acceptedFileTypes: acceptedFileTypes,
    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)
        },
    },
});" wire:ignore>
    <input id="file" type="file" x-ref="input" />
</div>

Please or to participate in this conversation.