风格化上传区域

原生上传 Dropzone 带样式

将您的上传字段升级为带有文件预览的风格化“Dropzone”。

composer require symfony/ux-dropzone

阅读文档

src/Form/DropzoneForm.php

// ... 隐藏 use 语句 - 点击显示

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

注意：此库不与 Dropzone.js JavaScript 库集成。

安装它

$ composer require symfony/ux-dropzone