无法在 AEM 6.2 的文件上传组件中看到预览图像

Question

我正在使用文件上传组件在初始创建对话框中将图像呈现为页面的一部分。

<image
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/foundation/form/fileupload"
        cq-msm-lockable="jcr:file"
        autoStart="{Boolean}false"
        class="cq-droptarget"
        fieldLabel="Hero Image (large)"
        fileNameParameter="./image/fileName"
        fileReferenceParameter="./asset"
        mimeTypes="[image]"
        multiple="{Boolean}false"
        name="./image/file"
        title="Upload Image Asset"
        uploadUrl="${suffix.path}/image/file"
        useHTML5="{Boolean}true"/>

我尝试了 uploadUrl 的多种变体 |文件名参数 | fileReferenceParameter 和名称字段无法在属性对话框中看到预览图像。

Screenshot of the broken preview block

不过，我确实在 CRXDE 中看到了图像数据。 jcr:content with image data

是否有人可以分享对话框中文件上传的有效实现？这是 AEM 6.2。

Answer 1

好吧，这比我希望的简单配置更改要复杂一些。所有功劳都归功于 @alex-figliolia 解决了这个问题。

<file
        autoStart="{Boolean}false"
        class="cq-droptarget"
        fieldLabel="Hero Image (large)"
        fileNameParameter="./image/fileName"
        fileReferenceParameter="./image/fileReference"
        jcr:primaryType="nt:unstructured"
        mimeTypes="[image]"
        multiple="{Boolean}false"
        name="./image/file"
        sling:resourceType="granite/ui/components/foundation/form/fileupload"
        title="Upload Image Asset"
        uploadUrl="${suffix.path}"
        useHTML5="{Boolean}true"
        />

更正后的对话框有 ./image/fileReference.

在组件的 content.xml (jcr:root) 中，我们添加了一个带有 sling:resourceType 图像的默认图像。

<cq:template
        jcr:primaryType="nt:unstructured">
    <image
        sling:resourceType="wcm/foundation/components/image"
        jcr:primaryType="nt:unstructured"
        text="image"/>
</cq:template>

在这种情况下，我们使用 use-api 和 js 文件来获取所需的数据。有一个 ret 对象我没有显示。但它是一个简单的 javascript 对象，其中 ret.image 以 null 开头。

var image = currentNode.hasNode('image') ? currentNode.getNode('image') : null;

if (image) {
   ret.image = image.hasProperty('fileReference') ? image.getProperty('fileReference') : null;
}

if (!ret.image) {
    try {
        var res = image.hasNode("file") ? image.getNode("file") : null;
        ret.image = res.getPath();
        ret.image = "background-image: url("+ ret.image + ");";
    } catch(err) {
        ret.image = "background-image: url(http://placehold.it/150x150?text=Placeholder);";
    }
} else {
   ret.image = "background-image: url(" + ret.image + ");";
}

就是这样，这将允许可拖动或上传的文件显示其预览和正确的图像。

为了完整起见，这里还使用了 HTML，其中数据是来自 javascript.

的 return 值

<div class="${data.imagesize} ${data.imageBackgroundColor ? 'icon' : ''}" style="${data.image @ context='styleString'}"></div>

无法在 AEM 6.2 的文件上传组件中看到预览图像

Unable to see preview image in fileupload component with AEM 6.2

aem