Include Image from local system to component dialog

[Sanjana12]

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

[arunpatidar]

Try with https://developer.adobe.com/experience-manager/reference-materials/6-5/granite-ui/api/jcr_root/libs/... 

[Sanjana12]

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

[arunpatidar]

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.

[Sanjana12]

Could you please provide me with that logic?

[ksh_ingole7]

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. 

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

Image : Component Dialog

Image : File Explorer opens after clicking the browse button.

Thanks

[Sanjana12]

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

[ksh_ingole7 · Accepted solution]

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

[Sanjana12]

Hi, could you please do the same for drag and drop feature?