Question

我正在使用fileupload组件在初始创建对话框中将图像渲染为页面的一部分。

<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的多种变体fileNameParameter | 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 of image添加默认图像。

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

在这个例子中，我们使用use-api和js文件来获取所需的数据。这是我没有展示的视觉对象。但它是一个简单的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的返回值。

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

无法使用AEM 6.2在fileupload组件中查看预览图像

1 个答案: