Почему Touch Ui FileUpload отображается как кнопка?

Question

Мне нужно перейти с html5smartfile xtype Классического пользовательского интерфейса на тип ресурса файловой загрузки Touch UI (/ libs / granite / ui / components / coral / foundation / form / fileupload).Но есть только кнопка после преобразования (отсутствует область «Отбросить актив»).

Что я должен сделать, чтобы гранитный компонент выглядел так, как это было раньше в Classic UI?

Classic 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"/>

Классический рендеринг пользовательского интерфейса Сенсорный рендеринг пользовательского интерфейса

Answer 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, который вы, вероятно, должны использовать:

• http://opensource.adobe.com/aem-core-wcm-components/library/image.html
• https://github.com/adobe/aem-core-wcm-components/tree/master/content/src/content/jcr_root/apps/core/wcm/components/image/v2/image