php - Array management and preview with Laravel Livewire

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;
    }
}