Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.

Error In Browse Image from Local in Header Component

Avatar

Level 4

Hi All,

 

I have written one header component like below.

 

subnaik_0-1726137872429.png

 

But when I am uploading image from my local , as shown below then Image is not coming as shown below.

 

subnaik_1-1726138010522.png

 

subnaik_2-1726138046862.png

 

I have written below HTL, JAVA and cq:dialog

 

**************************** HTL ************************************

<sly data-sly-use.headerobj="ai.contentadmin.core.models.HeaderComponent"></sly>

<!-- header section -->
<div class="header-section" style="background-color: black;">
	<div class="header-section-wrapper">
		<a href="#" class="header-logo-link">
			<img data-sly-test="${headerobj.headerLogo}" class="header-logo" src=${headerobj.headerLogo} alt="AI Logo" />
		</a>
		<div class="selection" style="border-color: rgba(80, 80, 80, 1);">
			<div class="selection-wrapper" id="language-selection">
				<div class="selected-lang" style="color: white;">
					<!-- Selected Language will be added thru js -->
				</div>
				<img class="element-chrevron-down" src="/content/dam/talent-onboarding/assets/16-chrevron-down.svg" alt="Dropdown Icon" />
			</div>
			<div class="dropdown-content" id="dropdown-content" style="background-color: white;">
				<!-- Dropdown content will be dynamically added here -->
				<sly data-sly-list.item="${headerobj.languageList}">
					<a class="lang-all" href="${item.langPath}">${item.langName}</a>
				</sly>
			</div>
		</div>
	</div>
</div>

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html">
	<sly data-sly-call="${clientlib.all @ categories='onboarding.cmp.header'}"/>
</sly>

<output data-sly-include='fullscreenmodal.html' data-sly-unwrap></output>    

 

********************************* JAVA **********************************

package ai.contentadmin.core.models;

import org.apache.sling.api.SlingHttpServletRequest;
import org.apache.sling.api.resource.Resource;
import org.apache.sling.models.annotations.Default;
import org.apache.sling.models.annotations.DefaultInjectionStrategy;
import org.apache.sling.models.annotations.Model;
import org.apache.sling.models.annotations.injectorspecific.ChildResource;
import org.apache.sling.models.annotations.injectorspecific.ValueMapValue;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import javax.annotation.PostConstruct;
import java.util.Collections;
import java.util.Iterator;

@Model(adaptables = SlingHttpServletRequest.class, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
public class HeaderComponent {

    private static final Logger LOGGER = LoggerFactory.getLogger(HeaderComponent.class);

    private Iterator<Resource> nodesItemList;

    @ChildResource
    private Resource languages;

    @ValueMapValue
    @default(values = "")
    String headerLogo;

    @PostConstruct
    public void activate() {
        nodesItemList = Collections.emptyIterator();
        if(languages != null && languages.hasChildren()) {
            nodesItemList = languages.listChildren();
        }
    }

    public Iterator<Resource> getLanguageList(){
        LOGGER.info("The Languages list is {}", nodesItemList);
        return nodesItemList;
    }

    public String getHeaderLogo(){
        LOGGER.info("Header Logo path is {}", headerLogo);
        return headerLogo;
    }

}

 

********************************* cq:dialog *************************************

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    jcr:title="Header"
    sling:resourceType="cq/gui/components/authoring/dialog">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/container">
        <items jcr:primaryType="nt:unstructured">
            <columns
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
                margin="{Boolean}true">
                <items jcr:primaryType="nt:unstructured">
                    <column
                        granite:class="cq-RichText-FixedColumn-column"
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/container">
                        <items jcr:primaryType="nt:unstructured">
                            <file
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="cq/gui/components/authoring/dialog/fileupload"
                                class="cq-droptarget"
                                fieldLabel="Logo asset"
                                fileNameParameter="./fileName"
                                fileReferenceParameter="./headerLogo"
                                mimeTypes="[image/gif,image/jpeg,image/png,image/tiff,image/svg+xml]"
                                name="./file"/>
                            <lang
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/container">
                                <items jcr:primaryType="nt:unstructured">
                                    <well
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/coral/foundation/well">
                                        <items jcr:primaryType="nt:unstructured">
                                            <labels
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/container">
                                                <items jcr:primaryType="nt:unstructured">
                                                    <languages
                                                        jcr:primaryType="nt:unstructured"
                                                        sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
                                                        composite="true"
                                                        fieldDescription="Add Languages"
                                                        fieldLabel="Languages">
                                                        <field
                                                            jcr:primaryType="nt:unstructured"
                                                            sling:resourceType="granite/ui/components/coral/foundation/container"
                                                            name="./languages">
                                                            <items jcr:primaryType="nt:unstructured">
                                                                <column
                                                                    jcr:primaryType="nt:unstructured"
                                                                    sling:resourceType="granite/ui/components/coral/foundation/container">
                                                                    <items jcr:primaryType="nt:unstructured">
                                                                        <langName
                                                                            jcr:primaryType="nt:unstructured"
                                                                            sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                                                            fieldLabel="Language Name"
                                                                            name="./langName"/>
                                                                        <langPath
                                                                            jcr:primaryType="nt:unstructured"
                                                                            sling:resourceType="granite/ui/components/coral/foundation/form/pathbrowser"
                                                                            fieldLabel="Language Path"
                                                                            name="./langPath"
                                                                            rootPath="/content/talentonboarding"/>
                                                                    </items>
                                                                </column>
                                                            </items>
                                                        </field>
                                                    </languages>
                                                </items>
                                            </labels>
                                        </items>
                                    </well>
                                </items>
                            </lang>
                        </items>
                    </column>
                </items>
            </columns>
        </items>
    </content>
</jcr:root>

 

Can anyone please help me here , why I am not getting image when I am browsing from my local ?

 

Thanks

Subnaik

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

7 Replies

Avatar

Community Advisor

Your dialog itself is not reading the image due to issue with your image it seems.

Try to set one property "useHTML5" to true to the image dialog field and see, if not solve the issue try to use different .svg image.

Hope this helps

Umesh Thakur

Avatar

Level 4

@kautuk_sahni , I am doing all the steps now mentioned here in the group. I will let you know by end of today.

 

Thanks.

Avatar

Community Advisor

Hi @subnaik ,

We should extend this type of functionality from OOTB component and adjust our component accordingly.

You may add below property it will works

sling:resourceSuperType
String
core/wcm/components/image

MukeshYadav__0-1726150712260.png

Result

MukeshYadav__1-1726150895625.png

 

Thanks

Avatar

Level 4

@MukeshYadav_ I have added the slingresourcesupertype  as below. Now my image is coming inside the asset container , but in html it is not coming like below.

 

 

subnaik_0-1726226103083.png

 

subnaik_2-1726226201296.png

 

Ideally it should come like below.

 

subnaik_3-1726226301929.png

 

 

 

Avatar

Community Advisor

If you upload image from device, image will be saved as a local copy to that component as a child node.

As image is a child resource (not a property with DAM reference as value), need to write login to get child image and render.

Avatar

Community Advisor

Hi @subnaik ,

 

Check where the image is being upload. Generally, the image uploaded via browser option is stored directly the the component node in the content path. Also, check the the network tab to see which path the image is getting submitted to along with other dialog properties.

Avatar

Administrator

@subnaik Did you find the suggestions helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!



Kautuk Sahni