Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

246
Vistas
kartik-v bootstrap file-input dynamic initialPreview

I have problem to use initialPreview from upload Ajax. I return two items from the upload request, but just the first item will be shown.
twig:

<div class="file-loading">
    <input id="input-id" name="input-res-1" type="file" class="file" multiple data-browse-on-zone-click="true">
</div>
{% set uploadUrl = path('mytest_property_test_upload') %}

<script>
    let inputEl = $("#input-id");
    inputEl.fileinput(
        {
            uploadUrl: {{ uploadUrl|json_encode()|raw }},
            initialPreviewAsData: true,
        }
    );
</script>

php:

/**
 * @Route("/ajax/test-upload", name="mytest_property_test_upload")
 */
public function testUpload()
{
    return new JsonResponse([
        'initialPreview' => [
            "https://picsum.photos/id/900/1920/1080",
            "https://picsum.photos/id/901/1920/1080"
        ],
        // initial preview configuration
        'initialPreviewConfig' => [
            ['caption' => "Picture-3.jpg", 'description' => "desc", 'size' => 628782, 'width' => "120px", 'url' => "/site/file-delete", 'key' => 3],
            ['caption' => "Picture-4.jpg", 'description' => "desc", 'size' => 628782, 'width' => "120px", 'url' => "/site/file-delete", 'key' => 4],

        ],
        'initialPreviewAsData' => true,
        'append' => false
    ]);
}

chrome inspect network response: enter image description here

upload process gif: enter image description here

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda