0

I want to use filepond to make my input forms fancier, but it replaces my file widget with a series of elements of which have no name attribute, so nothing shows up on the back end.

Here is my Symfony form class:

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'],
        ]); 
    }
}

Here is what it looks like when I create the file widget in twig:

<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>

Here are the filepond libraries I used, included at the bottom of my twig file:

<!-- 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">

So when the twig file loads, filepond takes over and converts my widget to a series of elements with all kinds of properties to them.

That's fine, I understand that filepond does this to fancy up your forms. But the problem is that on the back-end, nothing shows up.

One more thing to add - none of the elements which filepond creates have a "name" attribute to them, I don't understand why.

So when I look at the files suplerglobal on the back end, my idFile is not there.

Just to re-affirm, when I take out the filepond class, my idFile shows back up in the files suplerglobal at the back-end just fine.

Here is the twig-generated input element:

<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>

If I do an inspect element, among the filepond-generated divs there is a < input type="hidden" name="user_profile[idFile]" value="">

Here is the controller code at the back end:

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();

If I do a dump($idFile); then it just displays null, and I have checked and made sure that I have selected a file to upload.

How can I use the filepond library and get my file input widget to show up on the back-end?

Brent Heigold
  • 1,213
  • 5
  • 24
  • 50
  • When viewing the source of the page, does the twig generated input element have a `name` attribute? FilePond should copy it. – Rik Feb 17 '19 at 12:56
  • Hi Rik, this just got even weirder. When viewing the source it shows the input file widget with the name user_profile[idFile], but if you do inspect element it shows all the filepond generated divs. Among the filepond-generated divs there is a " – Brent Heigold Feb 17 '19 at 14:17
  • 1
    this is normal, one shows the HTML page served by the server, the other shows the current state of the DOM interpreted by the browser. More info here: https://stackoverflow.com/a/13070270/1774081 – Rik Feb 18 '19 at 07:02
  • 1
    Reading your updated comment it seems like you expect FilePond to also post a file object to the server. Unfortunately, that is not possible, as setting the value of a file input with JavaScript cannot be done. See intro text of File Encode plugin: https://pqina.nl/filepond/docs/patterns/plugins/file-encode/ – Rik Feb 18 '19 at 07:05

0 Answers0