Include Image from local system to component dialog

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