Silex file input with FormBuilderInterface

After a very fresh subscribing, I’ve decided to ask for help here, the place where I found so many solutions to my problems in the past.

I just achieved a course on Openclassrooms (Evolve to a professionnal PHP architecture) giving the keys to start with Silex, Twig and Bootstrap, and am reading Silex’s documentation while making a website.

But in all this dev, I decide to use the FormBuilderInterface and add a file input to my form :

class ActivityType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('title', 'text')
            ->add('public', 'choice', array(
                'choices' => array(
                    'children' => 'children',
                    'adults' => 'adults',
                    'family' => 'family',
                    ),
                ))
            ->add('withHorses', 'choice', array(
                'expanded' => 'true',
                'label' => 'With horses',
                ))
            ->add('content', 'textarea')
            ->add('image', 'file', array(
                'required' => 'false',
                'data_class' => null,
                ));
    }

    public function getName()
    {
        return 'activity';
    }
}

data_class => null is there to avoid an exception.

Here’s the view :

{{ form_start(activityForm, { 'attr': {'class': 'form-horizontal'} }) }}
    
{{ form_label(activityForm.title, null, { 'label_attr': { 'class': 'col-sm-4 control-label' }}) }}
{{ form_errors(activityForm.title) }} {{ form_widget(activityForm.title, { 'attr': { 'class': 'form-control' }}) }}
</div>
{{ form_label(activityForm.public, null, { 'label_attr': { 'class': 'col-sm-4 control-label' }}) }}
{{ form_errors(activityForm.public) }} {{ form_widget(activityForm.public, { 'attr': { 'class': 'form-control' }}) }}
</div>
{{ form_label(activityForm.withHorses, null, { 'label_attr': { 'class': 'col-sm-4 control-label' }}) }}
{{ form_errors(activityForm.withHorses) }} {{ form_widget(activityForm.withHorses, { 'attr': { 'class': 'form-control' }}) }}
</div>
{{ form_label(activityForm.content, null, { 'label_attr': { 'class': 'col-sm-4 control-label' }}) }}
{{ form_errors(activityForm.content) }} {{ form_widget(activityForm.content, { 'attr': { 'class': 'form-control', 'rows': '8' }}) }}
</div>
{{ form_label(activityForm.image, null, { 'label_attr': { 'class': 'col-sm-4 control-label' }}) }}
{{ form_errors(activityForm.image) }} {{ form_widget(activityForm.image, { 'attr': { 'class': 'form-control', 'accept': 'image/*' }}) }}
</div>
</div> {{ form_end(activityForm) }}

The file input is displayed but here is what it looks like.

While examining the DOM, I see something weird here. The div containing the file input does not possess the class "form-group” and I also figure that the attributes added to the input from the view (class: form-control and accept: images/*) are not taken in consideration.

I spent hours on the doc and have done some Google researchs and no result. I admit I have some difficulties with completely understanding Silex and I am perplex regarding this situation. I would like this file input to be normally positioned between the text-area and the submit button, also the label and the file input to be horizontally aligned, and that this part of the form takes in consideration the code from the view (classes and attributes).

Also, if anybody has infos on data_class, I would be very interested (especially why it has to be null to avoid an exception with a file input when using that interface).

Thanks in advance !

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s