README

Symfony UX Dropzone 是一个提供轻量级拖拽区域的 Symfony 扩展包，用于 Symfony 表单中的文件输入。它是 Symfony UX 创新项目的一部分。

它允许访客将文件拖拽到容器中，而不是在电脑上浏览文件。

安装

Symfony UX Dropzone 需要 PHP 7.2+ 和 Symfony 4.4+。

使用 Composer 和 Symfony Flex 安装此扩展包

composer require symfony/ux-dropzone

# Don't forget to install the JavaScript dependencies as well and compile
yarn install --force
yarn encore dev

同时确保您的 package.json 文件中至少有 @symfony/stimulus-bridge 的 2.0 版本。

使用方法

Symfony UX Dropzone 最常见的使用方法是将其作为原生 FileType 类的替换

// ...
use yassinehamouten\UX\DropzoneMultiple\Form\DropzoneMultipleType;

class CommentFormType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            // ...
            ->add('photo', DropzoneMultipleType::class)
            // ...
        ;
    }

    // ...
}

自定义设计

Symfony UX Dropzone 提供默认样式表以简化使用。如果您想添加自己的设计，可以禁用它。

在 assets/controllers.json 中，通过将 @yassinehamouten/ux-dropzone-multiple/src/style.css 的自动导入设置为 false 来禁用默认样式表

{
    "controllers": {
        "@yassinehamouten/ux-dropzone-multiple": {
            "dropzone-multiple": {
                "enabled": true,
                "webpackMode": "eager",
                "autoimport": {
                    "@yassinehamouten/ux-dropzone-multiple/src/style.css": false
                }
            }
        }
    },
    "entrypoints": []
}

注意：您应该将值设置为 false 而不是删除该行，这样 Symfony Flex 不会在将来再次尝试添加该行。

完成操作后，默认样式表将不再使用，您可以在 Dropzone 上实现自己的 CSS。

扩展默认行为

Symfony UX Dropzone 允许您使用自定义 Stimulus 控制器扩展其默认行为

// mydropzone_controller.js

import { Controller } from 'stimulus';

export default class extends Controller {
    connect() {
        this.element.addEventListener('dropzone-multiple:connect', this._onConnect);
        this.element.addEventListener('dropzone-multiple:change', this._onChange);
        this.element.addEventListener('dropzone-multiple:clear', this._onClear);
    }

    disconnect() {
        // You should always remove listeners when the controller is disconnected to avoid side-effects
        this.element.removeEventListener('dropzone-multiple:connect', this._onConnect);
        this.element.removeEventListener('dropzone-multiple:change', this._onChange);
        this.element.removeEventListener('dropzone-multiple:clear', this._onClear);
    }

    _onConnect(event) {
        // The dropzone was just created
    }

    _onChange(event) {
        // The dropzone just changed
    }

    _onClear(event) {
        // The dropzone has just been cleared
    }
}

然后在您的表单中，将控制器作为 HTML 属性添加

// ...
use yassinehamouten\UX\DropzoneMultiple\Form\DropzoneMultipleType;

class CommentFormType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            // ...
            ->add('photo', DropzoneMultipleType::class, [
                'attr' => ['data-controller' => 'mydropzone'],
            ])
            // ...
        ;
    }

    // ...
}

向后兼容性承诺

此扩展包旨在遵循与 Symfony 框架相同的向后兼容性承诺：https://symfony.com.cn/doc/current/contributing/code/bc.html

然而，目前它被视为 实验性的，这意味着它目前并未绑定到 Symfony 的 BC 政策。

运行测试

PHP 测试

php vendor/bin/phpunit

JavaScript 测试

cd Resources/assets
yarn test

yassinehamouten / ux-dropzone-multiple

维护者

详细信息