0

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!

3
  • 1
    Respecto al tema de no permitir mas imágenes, puedes emitir desde el componente una vez que evalúas con un condicional si el conteo de elementos del array es mayor o igual a 30, en caso afirmativo obtienes ese emit en el front y deshabilitas el input file, respecto a la previsualización de momento no tengo aporte alguno
    – user128299
    Commented el 6 ene. 2021 a las 15:17
  • Si la previsualización funciona raro la verdad jaja le estoy buscando la vuelta y probando es como que el primer push no lo muestra. A lo mejor pruebo con un hoof cycle pero también es medio vueltero. Gracias BetaM voy a buscar lo que me indicas!
    – maraet
    Commented el 6 ene. 2021 a las 15:28
  • Para lo que propongo, revisa aquí donde Caleb da un ejemplo
    – user128299
    Commented el 6 ene. 2021 a las 15:34

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.