降落区

拖放区域组件允许用户通过将文件拖放到页面上的区域或激活按钮来上传文件。

用于允许商家上传文件。他们可以将文件拖放到虚线区域，或者通过点击“添加文件”按钮或虚线区域内的任何地方来上传文件。

进口｛DropZone，堆栈，缩略图，标题｝从“@shopify /北极星”;进口｛NoteMinor｝从“@shopify / polaris-icons”;进口｛useState，useCallback｝从“反应”;函数DropZoneExample（）｛常量［文件，setFiles］=useState（［］）;常量handleDropZoneDrop=useCallback（（_dropFiles，acceptedFiles，_rejectedFiles）= >setFiles（（文件）= >［.．.文件，.．.acceptedFiles］），［］，）;常量validImageTypes=［“图像/ gif”，“图像/ jpeg”，“图像/ png”］;常量很常见=！文件．长度& &<DropZone．很常见/>;常量uploadedFiles=文件．长度>0& &（<div风格=｛｛填充：' 0 '｝｝><堆栈垂直>｛文件．地图（（文件，指数）= >（<堆栈对齐=“中心”关键=｛指数｝><缩略图的大小=“小”alt=｛文件．的名字｝源=｛validImageTypes．包括（文件．类型）吗?窗口．URL．createObjectURL（文件）：NoteMinor｝/><div>｛文件．的名字｝<标题>｛文件．大小｝字节</标题></div></堆栈>））｝</堆栈></div>）;返回（<DropZone onDrop=｛handleDropZoneDrop｝>｛uploadedFiles｝｛很常见｝</DropZone>）;｝

道具

想要帮助完善这个功能吗?请<！---->分享你的反馈．

接口<！----><！---->DropZoneProps<！---->

标签吗? 反应．ReactNode: 文件输入的标签。
labelAction吗?: 向标签添加一个操作。
labelHidden吗? 布尔: 在视觉上隐藏标签。
id吗? 字符串: 文件输入的ID。
接受吗? 字符串: 允许的文件类型。
类型吗? “文件”|“图像”|“视频”: 是文件还是图像。

默认为“文件”．
活跃的吗? 布尔: 设置活动状态。
错误吗? 布尔: 设置错误状态。
大纲吗? 布尔: 显示轮廓边框。

默认为真正的．
覆盖吗? 布尔: 显示悬停时的覆盖。

默认为真正的．
overlayText吗? 字符串: 显示在覆盖层中的文本。
errorOverlayText吗? 字符串: 设置为错误状态时出现在覆盖层中的文本。
allowMultiple吗? 布尔: 允许同时上传多个文件。

默认为真正的．
禁用吗? 布尔: 设置禁用状态。
孩子们吗? 任何: 要在dropzone中呈现的子元素。
dropOnPage吗? 布尔: 允许将文件放在页面上的任何位置。
openFileDialog吗? 布尔: 设置默认文件对话框状态。
variableHeight吗? 布尔: 允许子内容调整高度。
customValidator吗? （文件：文件) = >布尔: 添加自定义验证。
onClick吗? （事件：反应．MouseEvent<HTMLElement>) = >无效: 点击时触发回调。
onDrop吗? （文件：文件[]，acceptedFiles：文件[]，rejectedFiles：文件[]) = >无效: 在任何文件掉落时触发回调。
onDropAccepted吗? （acceptedFiles：文件[]) = >无效: 当至少一个删除的文件被接受时触发回调。
onDropRejected吗? （rejectedFiles：文件[]) = >无效: 当至少一个文件被拒绝时触发回调。
onDragOver吗? () = >无效: 当一个或多个文件拖过拖拽区域时触发的回调。
onDragEnter吗? () = >无效: 当一个或多个文件进入拖拽区域时触发的回调。
onDragLeave吗? () = >无效: 当一个或多个文件离开拖拽区域时触发的回调。
onFileDialogClose吗? () = >无效: 当取消文件对话框时触发回调。

最佳实践

降落区

空投区应:

当文件无法上传时，请通知商家:
- 如果可能的话，在拖拽时使用验证错误来检测和解释文件大小限制或接受的文件类型之类的事情。
- 使用横幅组件使用临界状态来传达服务器上发生的错误。
一旦文件被删除并开始上传，就提供反馈。
为方便起见，通过启用，允许将文件放在页面上的任何位置dropOnPage．
提供文件上传按钮，允许商家以传统方式选择文件上传。通过使用DropZone。文件Upload子组件。

验证错误

drop zone组件默认情况下验证文件类型。属性可以定义要接受的文件类型接受财产。属性接受自定义验证customValidator财产。当验证失败时，组件将自己设置为错误模式。

内容的指导方针

客户端验证错误消息

客户端验证错误提供即时反馈。

验证错误消息应该是:

显式:帮助商家理解为什么他们的文件不能上传，他们应该改变什么才能成功上传他们的文件
在句子的情况下:只大写的第一个词在消息
简洁:使用简单、清晰、一目了然的语言。例如:

文件大小必须小于20MB

文件类型必须为gif、jpg、png或svg

服务器端上传错误消息

服务器端上传错误在文件提交后给出反馈。

上传错误消息应:

显示为横幅处于临界状态
显示未成功上传的文件的名称
描述为什么文件无法上传，以及商家应该做哪些修改才能成功上传文件，如下所示

           
            
             
              
               例子

             
            
            以下图片无法上传：＊“保持-它-真正的．Png”太大了．尝试文件大小小于20MB．＊“真实-比-真正的．不支持Zip．文件类型必须为．gif，．jpg，．png或．svg．＊“所以-所以-真正的．由于网络连接薄弱，Png文件被中断，［重试上传］（＃）

Drop zone文件上传

使用文件上传和投递区组件让商家以传统方式选择要上传的文件。

文件上传属性

道具	类型	描述	默认的
actionTitle	字符串	文件上传时出现的字符串	“添加文件”
actionHint	字符串	文件上传时出现的字符串	“或删除文件上传”

要在错误发生时提供上传错误的上下文，请使用横幅组件
要在文件上传期间提供反馈，请使用转子组件

可访问性

drop zone组件构建在原生HTML之上< input type = "上传" >元素。它包括一个可视化的< >按钮以及一个拖放区域，可以接收键盘焦点。

键盘支持

要用键盘上传文件，商家可以与拖放区域进行交互。

要使输入键盘聚焦，请使用选项卡键(或转变+选项卡当向后切换时)
要激活输入，请使用输入/返回或空间键

降落区

道具