Uncaught (in promise) TypeError: Cannot read properties of null (reading 'fingerprint') Laravel Livewire

user_4112883 0
Viewed 3287

I've made a multiple file-upload component using Laravel Livewire. After the upload is complete I want to display the uploaded files without reloading the page, like so:

<div class="grid grid-flow-col auto-cols-max gap-4 mb-5">
    @foreach ($files as $file)
        <livewire:file :file="$file"/>
    @endforeach
</div>

Uploading one or multiple files at once works fine. But while uploading when there are already files present in the loop, Livewire throws this error: Uncaught (in promise) TypeError: Cannot read properties of null (reading 'fingerprint').

After doing some research I came to the conclusion that this is caused because Livewire generates the same id as the first file:

<div class="grid grid-flow-col auto-cols-max gap-4 mb-5">               
    <div wire:id="eCHZ9wxyp7nxOC4o5uCC" class="file file-jpeg file-lg">
        <!-- content of existing file component -->
    </div>
                     
    <div wire:id="eCHZ9wxyp7nxOC4o5uCC" class="file file-jpeg file-lg">
        <!-- content of new file component, should have Unique wire:id -->
    </div>        
</div>

How to fix this issue?

alpine.js laravel-livewire laravel vue.js
1 Answers

This issue first occurred in september 2020 and was dissolved (reference: https://github.com/livewire/livewire/issues/1686). The error occurred because the new file is not unique to the existing file. The solution mentioned on Github works but is outdated.

If you are on Laravel 7 or above, you can add :wire:key="$yourUniqueKey" to the livewire component inside the loop:

<div class="grid grid-flow-col auto-cols-max gap-4 mb-5">
    @foreach ($files as $file)
        <livewire:file :file="$file" :wire:key="$file->id"/>
    @endforeach
</div>

Reference: https://laravel-livewire.com/docs/2.x/nesting-components

user_41128830
Related