Upload Image with Preview

Simple example with a button:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.css"
    />
    <script src="https://unpkg.com/drawflow/dist/drawflow.min.js"></script>

    <style>

      #drawflow {
        position: relative;
        width: 600px;
        height: 600px;
        border: 1px solid red;
      }

      </style>
  </head>
  <body>
    <button onclick="exportDF()">Export</button>
    <button onclick="importDF()">Import</button>
        <div id="drawflow"></div>  

    <script>

        var id = document.getElementById("drawflow");
        const editor = new Drawflow(id);
        editor.reroute = true;
        editor.reroute_fix_curvature = true;

        editor.start();

        var html = `<div><p>Hii<p>
                    <button onclick="addimage(this)">addImage</button>
                    <input df-name-value>
                    <div class="images"></div>
                    <div>`;

        editor.addNode('github', 2, 2, 150, 100, 'github', { name: { value: "TESTTTTTTT4" }}, html);
        editor.addNode('github', 2, 2, 300, 150, 'github', {}, html);

        let  dataExport = {};
        function  exportDF() {
            dataExport = editor.export();
            console.log(dataExport);
        }
        function  importDF() {
            editor.import(dataExport);
        }

        function addimage(el) {
            const ele =  el.closest(".drawflow-node");
            const nodeId = ele.id.slice(5);
            const nodeInfo = editor.getNodeFromId(nodeId);

            const img = document.createElement("img");
            img.src=  'https://avatars.githubusercontent.com/u/53616269?s=88&u=b7dc0eae565dfcc78bef7905766b55b06cf2d4a9&v=4'
            img.width = '35';

            // Add image to export
            const transformToElement = new DOMParser().parseFromString(nodeInfo.html, 'text/html').body;
            transformToElement.querySelector(".images").appendChild(img);

            // Update Export 
            const module = editor.module;
            editor.drawflow.drawflow[module].data[nodeId].html = transformToElement.innerHTML

            // Add image to editor
            const  images = ele.querySelector(".images"); // Select target
            images.appendChild(img);

            // Update connections for resize node.
            editor.updateConnectionNodes(`node-${nodeId}`);
        }

    </script>

  </body>
</html>
jerosoler / Drawflow

Upload Image with Preview #281
