为什么 Touch Ui FileUpload 呈现为按钮？答案

【问题标题】：Why is Touch Ui FileUpload is rendered as button?为什么 Touch Ui FileUpload 呈现为按钮？
【发布时间】：2019-05-17 07:56:57
【问题描述】：

我需要从 Classic UI 的 html5smartfile xtype 迁移到 Touch UI 的文件上传资源类型 (/libs/granite/ui/components/coral/foundation/form/fileupload)。但是转换后只有一个按钮（“Drop an assets”区域缺失）。

我应该怎么做才能让花岗岩组件在经典 UI 中看起来像以前一样？

经典用户界面：

<file
    jcr:primaryType="cq:Widget"
    allowUpload="{Boolean}false"
    autoUploadDelay="1"
    ddAccept="application/pdf"
    ddGroups="[media]"
    fieldLabel="File"
    fileNameParameter="./fileName"
    fileReferenceParameter="./fileReference"
    mimeTypes="application/pdf"
    name="./file"
    sizeLimit="25"
    xtype="html5smartfile"/>

触摸用户界面：

<file
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/fileupload"
    fieldLabel="File"
    fileNameParameter="./fileName"
    fileReferenceParameter="./fileReference"
    mimeTypes="[application/pdf]"
    multiple="{Boolean}false"
    name="./file"
    sizeLimit="{Long}25"/>

Classic UI render Touch UI render

【问题讨论】：

标签： javascript aem sling aem-touch-ui

【解决方案1】：

在你的cq:dialog:

<file
    jcr:primaryType="nt:unstructured"
    sling:resourceType="cq/gui/components/authoring/dialog/fileupload"
    autoStart="{Boolean}false"
    class="cq-droptarget"
    fileNameParameter="./fileName"
    fileReferenceParameter="./fileReference"
    mimeTypes="[image/gif,image/jpeg,image/png,image/webp,image/tiff,image/svg+xml]"
    multiple="{Boolean}false"
    name="./file"
    title="Upload Image Asset"
    uploadUrl="${suffix.path}"
    useHTML5="{Boolean}true"/>

在你的cq:editConfig：

<cq:dropTargets jcr:primaryType="nt:unstructured">
    <image
        jcr:primaryType="cq:DropTargetConfig"
        accept="[image/gif,image/jpeg,image/png,image/webp,image/tiff,image/svg+xml]"
        groups="[media]"
        propertyName="./fileReference">
        <parameters
            jcr:primaryType="nt:unstructured"
            imageCrop=""
            imageMap=""
            imageRotate=""/>
    </image>
</cq:dropTargets>

这是基于 Core Components Image v2，您可能应该使用它：

【讨论】：