Array management and preview with Laravel Livewire - php

Question

When using an input file to load images with Livewire I found that if the user clicks to load multiple images it works correctly, but if he clicks on the same input a second time, the previews with Livewire are replaced by the selected images. second time. To solve this add an array that loads the images as follows:
My input file
<input wire:change="cargaImagenes" wire:model="imagen" type="file" name="imagen" accept="image/*" class="form-control-file" multiple>
Event Charge
public function cargaImagenes()
{
foreach ($this->imagen as $ima) {
array_push($this->imagenes, $ima);
}
}
The problem is that I do the previews of the images with Livewire in the following way:
#if ($imagenes)
<small>previsualización:</small>
<div class="form-inline">
#foreach($imagenes as $img)
<div wire:key="{{$loop->index}}">
<div class="m-2 img-thumbnail">
<img class="my-2 rounded img-fluid contenedor-img" src="{{ $img->temporaryUrl() }}">
<button class="btn btn-outline-danger" wire:click="eliminarImagen({{ $loop->index }})">
</button>
</div>
</div>
#endforeach
<br>
</div>
#endif
And the problem is that they don't show the first time I select images, it shows when I add more.
For the preview I use the $images property of the array
array_push($this->imagenes, $ima);
Can you give me a suggestion of what I could do to display all the images in the array.

Answer 1

This should work.
Remove wire:change completely.
<input wire:model="imagen" type="file" name="imagen" accept="image/*" class="form-control-file" multiple>
Hook on the updatedImagen() event method:
public function updatedImagen()
{
foreach ($this->imagen as $ima) {
$this->imagenes[] = $ima;
}
}