Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Include Image from local system to component dialog

Avatar

Level 4

How to add image from local filesystem to a component dialog? The drag and drop feature is working but cannot browse a file to upload

1 Accepted Solution

Avatar

Correct answer by
Level 5

You can refer to below logic to get the binary file :

 private boolean addThumbnail(Node node,SlingHttpServletRequest request){
        try {
            ResourceResolver resourceResolver = ResolverUtil.newResolver(resourceResolverFactory);
            RequestParameter rp = request.getRequestParameter("file");
            InputStream is = rp.getInputStream();
            Session session=resourceResolver.adaptTo(Session.class);
            ValueFactory valueFactory=session.getValueFactory();
            Binary imageBinary=valueFactory.createBinary(is);
            Node photo=node.addNode("photo","sling:Folder");
            Node file=photo.addNode("image","nt:file");
            Node content = file.addNode("jcr:content", "nt:resource");
            content.setProperty("jcr:mimeType", rp.getContentType());
            content.setProperty("jcr:data", imageBinary);
            return true;

        }catch (Exception e){
            LOG.info("\n ERROR while add Thumbnail - {} ",e.getMessage());
        }
        return false;
    }
}

Above piece of code will create a node structure to store the image in binary form.

Later once you have your image stored in Binary with other required properties, in the component model try to fetch the path of the image in a String variable

 

thumbnail=author.getPath()+"/photo/image";

 

This will store the image location in thumbnail variable. Write a getter method for the same. And use th below HTMl to render the image.

 

 

<div class="m-b-25"> <img src="${profile.thumbnail}" class="img-radius" alt="User-Profile-Image"> </div>

 

@Sanjana12 let me know in case of further question

Thanks

View solution in original post

8 Replies

Avatar

Level 4

I have used "cq/gui/components/authoring/dialog/fileupload" and I'm able to select images from my local filesystem but the image is not getting rendered on the page. The image is getting rendered when I'm using the drag and drop feature

Avatar

Community Advisor

Yes, it will not by default. Because when you upload a file, it saved inside the content page's image component node. So you need to write a logic to render image from binary.

Avatar

Level 5

Hi,

 

You can create the component in the below way (Please see the attached screenshot). Kindly add sling:resourceType as cq/gui/components/authoring/dialog/fileupload and refer to other properties as shown in screenshot. 

ksh_20799_0-1661327011823.png

 

With this you should be able to drag and drop as well as browse images from the local. Please see component dialog below.

ksh_20799_1-1661327094542.png

Image : Component Dialog

ksh_20799_2-1661327125589.png

Image : File Explorer opens after clicking the browse button.

 

Thanks

 

 

 

Avatar

Level 4

I have used "cq/gui/components/authoring/dialog/fileupload" and I'm able to select images from my local filesystem but the image is not getting rendered on the page. The image is getting rendered when I'm using the drag and drop feature

Avatar

Correct answer by
Level 5

You can refer to below logic to get the binary file :

 private boolean addThumbnail(Node node,SlingHttpServletRequest request){
        try {
            ResourceResolver resourceResolver = ResolverUtil.newResolver(resourceResolverFactory);
            RequestParameter rp = request.getRequestParameter("file");
            InputStream is = rp.getInputStream();
            Session session=resourceResolver.adaptTo(Session.class);
            ValueFactory valueFactory=session.getValueFactory();
            Binary imageBinary=valueFactory.createBinary(is);
            Node photo=node.addNode("photo","sling:Folder");
            Node file=photo.addNode("image","nt:file");
            Node content = file.addNode("jcr:content", "nt:resource");
            content.setProperty("jcr:mimeType", rp.getContentType());
            content.setProperty("jcr:data", imageBinary);
            return true;

        }catch (Exception e){
            LOG.info("\n ERROR while add Thumbnail - {} ",e.getMessage());
        }
        return false;
    }
}

Above piece of code will create a node structure to store the image in binary form.

Later once you have your image stored in Binary with other required properties, in the component model try to fetch the path of the image in a String variable

 

thumbnail=author.getPath()+"/photo/image";

 

This will store the image location in thumbnail variable. Write a getter method for the same. And use th below HTMl to render the image.

 

 

<div class="m-b-25"> <img src="${profile.thumbnail}" class="img-radius" alt="User-Profile-Image"> </div>

 

@Sanjana12 let me know in case of further question

Thanks