(Symfony 4) Добавление класса filepond стирает мой файловый виджет, и на его стороне ничего не появляется

Question

Я хочу использовать filepond, чтобы сделать мои формы ввода более изящными, но он заменяет мой файловый виджет на серию элементов, у которых нет атрибута name, поэтому на бэкэнде ничего не отображается.

Вот мой класс формы Symfony:

class UserProfileType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {        
        $builder
            ->add('firstName', TextType::class)
            ->add('lastName', TextType::class)

            etc... 

            // This is the widget I am concerned about for this question
            ->add('idFile', FileType::class, [
                'label' => 'File or Files',
                'required' => false,
                'mapped'   => false,
                'multiple' => false
         ])

            etc... 

        ->add('save', SubmitType::class, [
            'attr' => ['class' => 'save'],
        ]); 
    }
}

Вот как это выглядит, когда я создаю виджет файла в ветке:

<div class="col-12">
    <label for="file-upload" class="mb-2">Photo I.D.</label>
                                                    <!-- so right here where I add the filepond class --> 
    {{ form_widget(form.idFile, { 'id': 'file-upload', 'attr': {'class':     'form-control filepond'} } ) }}
  </div>

Вот библиотеки filepond, которые я использовал, включенные внизу моего файла ветки:

<!-- Load FilePond library -->
<script src="https://unpkg.com/filepond/dist/filepond.min.js"></script>
<!-- <script src="https://unpkg.com/jquery-filepond/filepond.jquery.js">     
</script> -->
<script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js"></script>
<link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
<link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css" rel="stylesheet">

Поэтому, когда файл ветки загружается, filepond вступает во владение и преобразует мой виджет в серию элементов со всеми видами свойств для них.

Хорошо, я понимаю, что filepond делает это, чтобы придать форму вашей форме. Но проблема в том, что на заднем плане ничего не появляется.

Еще одна вещь, которую нужно добавить - ни один из элементов, которые создает filepond, не имеет атрибута "name", я не понимаю почему.

Поэтому, когда я смотрю на файлы suplerglobal на серверной части, моего idFile там нет.

Просто чтобы еще раз подтвердить, что когда я убираю класс filepond, мой idFile снова хорошо отображается в файлах suplerglobal на серверной части.

Вот сгенерированный веткой элемент ввода:

<div class="col-12">
    <label for="file-upload" class="mb-2">Photo I.D.</label>
    <input type="file" id="file-upload" name="user_profile[idFile]" class="form-control filepond" /> 
  </div>

Если я делаю элемент проверки, среди div сгенерированных filepond есть < input type="hidden" name="user_profile[idFile]" value="">

Вот код контроллера на заднем конце:

public function saveProfileCompleteAction(Request $request)
{
    $user = $this->getUser();

    $form = $this->createForm(UserProfileType::class, $user);
    $form->handleRequest($request);

    if($form->isSubmitted() && $form->isValid())
    {
        $idFile = $form['idFile']->getData();

Если я сделаю dump($idFile); затем он просто показывает ноль, и я проверил и убедился, что я выбрал файл для загрузки.

Как я могу использовать библиотеку filepond и заставить мой виджет ввода файла отображаться на сервере?