can i import custom images onto diagram component

[shashank hatti]

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

[Balasubramanian Manikandan]

We created a sample to import external picture (.jpg or .png) into diagram component. Diagram 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.readAsDataURL(file);

    reader.onloadend = setImage.bind(this);

  }

Documentation

https://ej2.syncfusion.com/react/documentation/diagram/shapes/#image

https://ej2.syncfusion.com/react/documentation/uploader/how-to/open-and-edit-the-uploaded-files/

Sample

https://stackblitz.com/edit/react-wyjwnf-3vx1aj?file=index.js

[shashank hatti]

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 

[Balasubramanian Manikandan]

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

Sample:

https://stackblitz.com/edit/react-wyjwnf-f53kbl?file=index.js,index.html

[shashank hatti]

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

[Gobinath Dhamotharan]

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.

Sample

https://stackblitz.com/edit/react-wyjwnf-9cp5b4?file=index.js

[shashank hatti]

Thank you team. Thats perfect