Q:

Preview multiple uploaded images in symfony

I wanna preview my images with javascript before uploading it, I'm working in symfony & I use its FileType for form.. Here is my Code :
{% block content %}

    {{ form_start(form, {'attr': {'id': 'image_form', 'class': 'form-horizontal container'}} ) }}

    <div class="col-md-6">    
            <div class="form-group">
                <div class="col-md-3 text-right">
                    {{ form_label(form.name, 'Images to upload :', {'label_attr': {'class': 'control-label'}}) }}
                </div>
                <div class="col-md-8">

                    <div id="wrapper" style="margin-top: 20px;">
                    {{ form_widget(form.name, {'attr': {'id' : 'fileUpload'}}) }}
                    </div>
                    {{ form_errors(form.name) }}
                </div>
            </div>

        <div class="col-md-offset-7">

            {{ form_label(form.Upload) }}
            {{ form_widget(form.Upload, { 'label': 'Upload', 'attr': {'class': 'btn btn-info'}}) }}
            <button type="reset" class="btn btn-default">Clear</button>
        </div>
        <div id="image-holder"></div>
    </div>    

    {{ form_end(form) }}

{% endblock %}

    {% block javascripts %}

        {{ parent() }}

        <script>
            $(document).ready(function() {
                $("#fileUpload").on('change', function() {
                    //Get count of selected files
                    var countFiles = $(this)[0].files.length;
                    var imgPath = $(this)[0].value;
                    var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
                    var image_holder = $("#image-holder");
                    image_holder.empty();
                    if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
                        if (typeof(FileReader) != "undefined") {
                            //loop for each file selected for uploaded.
                            for (var i = 0; i < countFiles; i++)
                            {
                                var reader = new FileReader();
                                reader.onload = function(e) {
                                    $("<img />", {
                                        "src": e.target.result,
                                        "class": "thumb-image"
                                    }).appendTo(image_holder);
                                }
                                image_holder.show();
                                reader.readAsDataURL($(this)[0].files[i]);
                            }
                        } else {
                            alert("This browser does not support FileReader.");
                        }
                    } else {
                        alert("Pls select only images");
                    }
                });
            });
        </script>
    {% endblock %}

I, tried the same thing with a simple html input of type of file, & it was working fine, but why it doesn't in the Symfony form?

A:

It's because Symfony2 form_div_layout adding own id to every widget
{%- block widget_attributes -%}
  id="{{ id }}" name="{{ full_name }}"
  ....

So you have to change {'id' : 'fileUpload'} to {'class' : 'fileUpload'} and $("#fileUpload").on('change' to $(".fileUpload").on('change' and check the result. Or rewrite form layout.

