Styled Upload Zone

Native Upload Dropzone with style

Upgrade your upload field to a stylized "Dropzone" with file previews.

composer require symfony/ux-dropzone

src/Form/DropzoneForm.php

// ... use statements hidden - click to show use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\UX\Dropzone\Form\DropzoneType;
class DropzoneForm extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options): void
    {
        $builder
            ->add('file', DropzoneType::class, [
                'attr' => [
                    'placeholder' => 'Drag and drop a file or click to browse',
                ],
            ])
        ;
    }
}

templates/ux_packages/dropzone.html.twig

{% extends 'base.html.twig' %}

{% block body %}
    {% for message in app.flashes('dropzone_success') %}
        <div class="alert alert-success" data-turbo-cache="false">{{ message }}</div>
    {% endfor %}
    
    {{ form_start(form) }}
        {{ form_widget(form) }}
        <button type="submit" class="btn btn-primary">Upload it!</button>
    {{ form_end(form) }}
    
    <div class="d-flex eyebrows pt-5">
        <div>NOTE: this library does not integrate with the Dropzone.js JavaScript library.</div>
    </div>
{% endblock %}

UX Dropzone

NOTE: this library does not integrate with the Dropzone.js JavaScript library.

Install It

$ composer require symfony/ux-dropzone
$ npm install --force
$ npm run watch