Include Image from local system to component dialog | Community
Skip to main content
S
Sanjana12
August 24, 2022
Solved

Include Image from local system to component dialog

  • August 24, 2022
  • 2 replies
  • 1642 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by ksh_ingole7

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

2 replies

arunpatidar
Community Advisor
arunpatidarCommunity Advisor
Community Advisor
August 24, 2022

Try with https://developer.adobe.com/experience-manager/reference-materials/6-5/granite-ui/api/jcr_root/libs/granite/ui/components/coral/foundation/form/fileupload/index.html 

Arun Patidar
    S
    Sanjana12Author
    August 24, 2022

    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
      Community Advisor
      arunpatidarCommunity Advisor
      Community Advisor
      August 24, 2022

      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.

      Arun Patidar
        ksh_ingole7
        Community Advisor
        ksh_ingole7Community Advisor
        Community Advisor
        August 24, 2022

        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

         

         

         

          S
          Sanjana12Author
          August 24, 2022

          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
            Community Advisor
            ksh_ingole7Community AdvisorAccepted solution
            Community Advisor
            August 24, 2022

            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

              Terms & ConditionsAccessibility statement

              Loading footer...