Styled Upload Zone

Native Upload Dropzone with style

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

composer require symfony/ux-dropzone

Read the docs

src/Form/DropzoneForm.php

// ... use statements hidden - click to show

use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\HttpFoundation\File\File;
use Symfony\UX\Dropzone\Form\DropzoneType;


/**
 * @extends AbstractType<array{file?: File}>
 */
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') %}
        <twig:Alert variant="success" data-turbo-cache="false" class="mb-4">{{ message }}</twig:Alert>
    {% endfor %}
    
    {{ form_start(form) }}
        {{ form_widget(form) }}
        <twig:Button variant="primary" type="submit">Upload it!</twig:Button>
    {{ form_end(form) }}
    
    <div class="flex eyebrows pt-12">
        <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