欧宝娱乐app下载地址Symfony UX Dropzone
编辑本页欧宝娱乐app下载地址Symfony UX Dropzone
欧宝娱乐app下载地址Symfony UX Dropzone是一个Symfony bundle，它为Symfony Forms中的文件输入提供了light Dropzone。它是Symf欧宝娱乐app下载地址ony UX计划．
它允许访问者将文件拖放到容器中，而不必在计算机上浏览文件。
安装
在你开始之前，确保你有欧宝娱乐app下载地址在你的应用中配置Symfony UX．
然后，使用Composer和Symfony Flex安装这个包:欧宝娱乐app下载地址
1 2 3 4 5 6 7 8 9
＄作曲家需要symfony/ux-d欧宝娱乐app下载地址ropzone不要忘记安装JavaScript依赖项并进行编译＄NPM install——force＄NPM运行监视#或用纱线＄纱线安装力＄纱看还要确保您拥有至少3.0的版本@欧宝娱乐app下载地址symfony / stimulus-bridge在你的package.json文件。
使用
Symfony UX Dropzone最常见的用法欧宝娱乐app下载地址是使用它作为本地FileType类的替代物:
12 3 4 5 6 7 8 9 10 11 12 13 14 15 16
/ /……使用欧宝娱乐app下载地址＼用户体验＼Dropzone＼形式＼DropzoneType；类CommentFormType扩展AbstractType｛公共函数buildForm(FormBuilderInterface＄构建器数组,＄选项）｛＄构建器/ /……->add (“照片”, DropzoneType：：类)/ /……；｝/ /……｝定制设计
欧宝娱乐app下载地址为了方便使用，Symfony UX Dropzone提供了一个默认样式表。如果您愿意，可以禁用它来添加您自己的设计。
在资产/ controllers.json时禁用默认样式表@欧宝娱乐app下载地址symfony / ux-dropzone / src / style.cssautoimport来假：
12 3 4 5 6 7 8 9 10 11 12 13 14
｛“控制器”: {“@欧宝娱乐app下载地址symfony / ux-dropzone”: {“dropzone”: {“启用”：真正的，“获取”：“渴望”，“autoimport”: {“@欧宝娱乐app下载地址symfony / ux-dropzone / src / style.css”：假}}}}，“entrypoints”: []}请注意
请注意:你应该把值放在假并且不要删除该行，这样Symfony Flex以后就不会再尝试添欧宝娱乐app下载地址加该行。
一旦完成，默认样式表将不再使用，您可以在Dropzone之上实现自己的CSS。
扩展默认行为
欧宝娱乐app下载地址Symfony UX Dropzone允许您使用自定义刺激控制器扩展其默认行为:
12 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
/ / mydropzone_controller.js进口{控制器}从“@hotwired /刺激”；出口默认的类扩展控制器{connect() {这.element.addEventListener (“dropzone:连接”，这._onConnect);这.element.addEventListener (“dropzone:改变”，这._onChange);这.element.addEventListener (“dropzone:明确”的，这._onClear);} disconnect() {//当控制器断开连接时，应该总是删除监听器以避免副作用这.element.removeEventListener (“dropzone:连接”，这._onConnect);这.element.removeEventListener (“dropzone:改变”，这._onChange);这.element.removeEventListener (“dropzone:明确”的，这._onClear);} _onConnect(事件){// dropzone刚刚被创建} _onChange(事件){// dropzone刚刚改变} _onClear(事件){// dropzone已经被清除}}然后在你的表单中，添加你的控制器作为一个HTML属性:
12 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
/ /……使用欧宝娱乐app下载地址＼用户体验＼Dropzone＼形式＼DropzoneType；类CommentFormType扩展AbstractType｛公共函数buildForm(FormBuilderInterface＄构建器数组,＄选项）｛＄构建器/ /……->add (“照片”, DropzoneType：：类,“attr”= > [“数据控制器”= >“mydropzone”),)/ /……；｝/ /……｝向后兼容承诺
这个包旨在遵循与Symfony框架相同的向后兼容性承诺:欧宝娱乐app下载地址https://欧宝娱乐app下载地址www.oldmanjams.com/doc/current/contributing/code/bc.html
