Symfony VichUploaderBundle Form Theme does not displays element

Question

On my Symfony 3 project that uses VichUploaderBundle and FosUserBundle I created a form that the user uploads the avatar image:

namespace AppUserBundle\Form\Type;

use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\Form\Extension\Core\Type\TextType;
use AppUserBundle\Form\Type\PurifiedTextAreaType;
use AppUserBundle\Form\Type\ProfileImageType;

class UserProfileFormType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        parent::buildForm($builder, $options); 
        $builder->add('user_image_file',ProfileImageType::class,array('required'=>false,'label'=>'profile.image'));
        $builder->add('name',TextType::class,array('label'=>'profile.first_name','required' => false));
        $builder->add('surname',TextType::class,array('label'=>'profile.surnname','required' => false));
        $builder->remove('username');
        $builder->add('username',TextType::class,['required' => false]);
        $builder->add('email',TextType::class,['required' => false]);
        $builder->add('description',PurifiedTextAreaType::class,['required' => false]);
        $builder->remove('current_password');
    }

    public function getParent()
    {
        return 'FOS\UserBundle\Form\Type\ProfileFormType';
    }

    public function getBlockPrefix()
    {
        return 'app_user_profile';
    }

    // For Symfony 2.x
    public function getName()
    {
        return $this->getBlockPrefix();
    }
}

That uses the ProfileImageType for the image representation:

namespace AppUserBundle\Form\Type;

use Vich\UploaderBundle\Form\Type\VichImageType;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\OptionsResolver\OptionsResolver;

class ProfileImageType extends AbstractType 
{

    /**
     * @return string
     */
    public function getExtendedType()
    {
        return VichImageType::class;
    }

    /**
     * 
     * {@inheritDoc}
     * @see \Symfony\Component\Form\AbstractType::configureOptions()
     */
    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults(['required'=>false,'allow_delete'=>true,'download_link' => true]);       
    }
}

And the form gets rendered by the following template ('app/FOSUserBundle/Profile/edit_content.html.twig'):

{% trans_default_domain 'FOSUserBundle' %}

{% form_theme form 'bootstrap_3_layout.html.twig' 'VichUploaderBundle:Form:fields.html.twig' %}

{{ form_start(form, { 'action': path('fos_user_profile_edit') }) }}
    <div class="col-xs-12">
        {{ form_row(form.user_image_file) }}
    </div>
    <div class="col-xs-12 col-sm-6">
        <div class="form-group">
            {{ form_row(form.name) }}
        </div>
    </div>
    <div class="col-xs-12 col-sm-6">
        <div class="form-group">
            {{ form_row(form.surname) }}
        </div>
    </div>

    <div class="col-xs-12 col-sm-6">
        <div class="form-group">
            {{ form_row(form.username) }}
        </div>
    </div>

    <div class="col-xs-12 col-sm-6">
        <div class="form-group">
            {{ form_row(form.email) }}
        </div>
    </div>
    <div class="col-xs-12">
        <div class="form-group">
            {{ form_row(form.description) }}
        </div>
    </div>  
    <div class="col-xs-12">
        <div class="form-group">
            <input type="submit" class="btn btn-flat btn-primary" value="{{ 'profile.edit.submit'|trans }}" />
        </div>
    </div>
{{ form_end(form) }}

But the {{ form_row(form.user_image_file) }} does not gets rendered by an file uploading input element instead it renders the following html:

<div id="fos_user_profile_form_user_image_file"></div>

Do you have any idea why does this happen and how I will fix it?

Answer 1

In the end I had to use the getParent() instead of getExtendedType().