How to use dropzone in Symfony form?

I downloaded a Template and I am working on the backend of the website using Symfony4!

The form page works perfectly fine! but when I attempt to include it to the Symfony project, the Dropzone doesn’t show/work properly!

The Working form

You can see in the pictures (1 and 2) how the dropzone works fine!
The picture that doesn't work

You can see in picture 3 how it shows in my Symfony project!

Here is the code of the form userType.php : its called picture

<?php

namespace AppForm;

use AppEntityUser;
use SymfonyComponentFormAbstractType;
use SymfonyComponentFormFormBuilderInterface;
use SymfonyComponentOptionsResolverOptionsResolver;
use SymfonyComponentFormExtensionCoreTypeFileType;
use SymfonyComponentFormExtensionCoreTypePasswordType;

class UserType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('Full_Name')
            ->add('username')
            ->add('email')
            ->add('password')
            ->add('password2',PasswordType::class,array(
                'mapped'=>false,
            ))
            ->add('phone')



            ->add('picture', FileType::class, array(
                'data_class' => null,
                'required' => false,
            ))
        ;
    }

    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults([
            'data_class' => User::class,
        ]);
    }
}

Code of the View (Twig page)

<center>
<div class="dropzone" class="col-lg-12 col-md-12 col-sm-12">
    <form action="/" id="frmFileUpload"  method="post" enctype="multipart/form-data">
        <div class="dz-message">
            <div class="drag-icon-cph"> <i class="material-icons">touch_app</i> </div>
            <h3>Drop picture here or click to upload.</h3>
            <em>Please upload your picture.(Its optional)</em> </div>
             {{ form_widget(form.picture, {'attr': {'type': 'file'} }) }}       

        <div class="fallback">
        </div>
    </form>
</div>
</center>

Here is the code of the working dropzone

<div class="row clearfix">
    <div class="col-lg-12 col-md-12 col-sm-12">
        <form action="/" id="frmFileUpload" class="dropzone" method="post" enctype="multipart/form-data">
            <div class="dz-message">
                <div class="drag-icon-cph"> <i class="material-icons">touch_app</i> </div>
                <h3>Drop files here or click to upload.</h3>
                <em>(This is just a demo dropzone. Selected files are <strong>not</strong> actually uploaded.)</em> </div>
            <div class="fallback">
                <input name="file" type="file" multiple />
            </div>
        </form>
    </div>
</div>

Source: Symfony Questions

Was this helpful?

0 / 0

Leave a Reply 0

Your email address will not be published. Required fields are marked *