Styled Upload Zone

Native Upload Dropzone with style

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

composer require symfony/ux-dropzone

What Stylized Dropzone gives you

  • A styled drop zone

    A file field that looks like your design.

  • Drag and drop

    Drop a file anywhere on the zone.

  • Instant preview

    Show the picked file before uploading.

  • Fully themeable

    Override the markup and the styles.

  • Standard validation

    Symfony constraints still apply.

Upload Files with Style

Add Stylized Dropzone to your app.

Form type for stylized "drop zone" for file uploads

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 %}
Symfony logo

UX Dropzone

Drag and drop a file or click to browse
NOTE: this library does not integrate with the Dropzone.js JavaScript library.

A file input, dressed up

What changes for your form.

Underneath it is still a file input. The markup, the preview and the styles are what the package replaces.

Extends FileType

Constraints, multiple uploads and mapping to your entity work exactly as before.

$builder->add('photo', DropzoneType::class, [
    'label' => 'Drop a picture here',
]);

Preview before upload

A Stimulus controller shows the picked file and lets the visitor drop a new one over it.

<input type="file"
    data-controller="symfony--ux-dropzone--dropzone"
>

Your markup, your styles

The shipped form theme is a starting point. Override the block and the field is yours.

{% form_theme form '@Dropzone/form_theme.html.twig' %}

Install Stylized Dropzone.

$ composer require symfony/ux-dropzone

More from Symfony UX.

Stylized Dropzone is one package among many. They share the same Stimulus foundation and install the same way.

Image for the Image Cropper UX package

Image Cropper

Form Type and tools for cropping images

Image for the Notify UX package

Notify

Trigger native browser notifications from inside PHP

Image for the CalendarLink UX package

CalendarLink

Let users add your events to their calendar of choice in one click.

Browse every package

Keep Stylized Dropzone at hand.

Documentation, the people behind it, and where to ask when something does not behave.

Documentation

Symfony UX Stylized Dropzone Docs
Community

Feedback · support · contributions.
Support

Get help with Symfony UX Stylized Dropzone