recurro a ustedes por que no encuentro la lógica correcta para terminar la funcionalidad de carga de imágenes correctamente. Recibí una gran ayuda en el sitio pero me falta terminar de mejorar algunas cuestiones. Agradezco mucho sugerencias.
Mi input de imágenes carga múltiples imágenes:
<input wire:change="cargaImagenes" wire:model="imagen" type="file" name="imagen" accept="image/*" class="form-control-file" multiple>
Gracias al usuario BetaM pude hacer que el input cargue más imágenes si el usuario hace clic nuevamente en el input.
public function cargaImagenes()
{
foreach ($this->imagen as $ima) {
array_push($this->imagenes, $ima);
}
}
El problema es que realizo las previsualizaciones de las imagenes con Livewire de la siguiente manera:
@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
Y el problema es que no se muestran la primera vez que selecciono imágenes, se muestra cuando agrego más.
Para la previsualización uso la propiedad $imagenes del array
array_push($this->imagenes, $ima);
Me pueden brindar una sugerencia de lo que podría hacer para que se muestren todas las imágenes que hay en el array.
Y un punto más si no es mucho pedir tampoco logro que el usuario sólo pueda seleccionar 30 imágenes. El input permite seleccionar n cantidad de imágenes, hay forma de cambiar este comportamiento??
¡Muchas gracias por su tiempo!