Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

244
Views
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
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!