Styled Upload Zone

Native Upload Dropzone with style

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

 

src/Form/DropzoneForm.php

public function buildForm(FormBuilderInterface $builder, array $options)
{
    $builder
        ->add('file', DropzoneType::class, [
            'attr' => [
                'placeholder' => 'Drag and drop a file or click to browse',
            ],
        ])
    ;
}

templates/anything.html.twig

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

{% block body %}
    {{ form_start(form) }}
        {{ form_widget(form, { label: false }) }}

        <button type="submit" class="btn btn-primary">Upload it!</button>
    {{ form_end(form) }}
{% 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.

Install It

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