We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

can i import custom images onto diagram component

Hi team, i was looking for a functionality where we can import png or jpg image into diagram component. can you kindly suggest for the same

6 Replies

BM Balasubramanian Manikandan Syncfusion Team January 6, 2023 01:30 PM UTC

We created a sample to import external picture (.jpg or .png) into diagram componentDiagram allows to add images as image nodes. The shape property of node allows you to set the type of node and for image nodes, it should be set as image. In addition, the source property of shape enables you to set the image source. By using the uploader component we have import external image into diagram node for selected nodes. For more information about uploader component and Image node, please refer to the below documentation for your reference.

Code snippet

  function setImage(event) {

    if (diagramInstance.selectedItems.nodes.length > 0) {

      var node = diagramInstance.selectedItems.nodes[0];

      node.shape = {

        type: 'Image',

        source: event.target.result,

        align: 'None',




  function onUploadSuccess(args) {

    var file1 = args.file;

    var file = file1.rawFile;

    var reader = new FileReader();


    reader.onloadend = setImage.bind(this);







SH shashank hatti January 9, 2023 10:16 AM UTC

Hi team,

That perfect and works. But is there a way to insert image with node simultaneously, so uploading places both picture and new node at once onto diagram component. Because now we either declare node before or do select node thats dragged 

BM Balasubramanian Manikandan Syncfusion Team January 10, 2023 02:44 PM UTC

We have modified a sample in which rendered a node and image simultaneously. Refer to the below mentioned sample.



SH shashank hatti replied to Balasubramanian Manikandan January 16, 2023 07:07 AM UTC

Team, thank you. Thats works great. While i have one last requirement. How to do hide that browse or drag box and trigger it with just small picture button which works same as browse button when clicked on small picture button

GD Gobinath Dhamotharan Syncfusion Team January 18, 2023 01:18 PM UTC

We modified a sample to achieve your requirement. Now we upload a image node in diagram using a image button. Please refer to the below sample for your reference.



SH shashank hatti January 19, 2023 12:20 PM UTC

Thank you team. Thats perfect

Live Chat Icon For mobile
Up arrow icon