title: Paste image, convert to base64 tag directly onto <textinput>
body: <h2>friendly notice: this question is a bit long.</h2>
  <h3><a href="https://jstrieb.github.io/urlpages/editor/#eyJjc3MiOiIiLCJqcyI6IiIsImh0bWwiOiI8c2NyaXB0IHNyYz1cImh0dHBzOi8vYWpheC5nb29nbGVhcGlzLmNvbS9hamF4L2xpYnMvanF1ZXJ5LzMuMy4xL2pxdWVyeS5taW4uanNcIj48L3NjcmlwdD5cbjx0ZXh0YXJlYSBpZD1cImlucHV0XCI+PC90ZXh0YXJlYT5cbjx0ZXh0YXJlYSByZWFkb25seSBwbGFjZWhvbGRlcj1cIkJhc2U2NCBkYXRhXCIgaWQ9XCJiNjRcIiByb3dzPVwiMVwiIHN0eWxlPVwid2lkdGg6MTEwcHhcIj48L3RleHRhcmVhPlxuPGJ1dHRvbiBvbmNsaWNrPVwiZW50ZXJCYXNlNjQoKVwiPmVudGVyPC9idXR0b24+XG5cbjxzY3JpcHQ+XG4gJChkb2N1bWVudCkucmVhZHkoZnVuY3Rpb24oKSB7XG4gICQoJyNpbnB1dCcpLm9uKCdwYXN0ZScsIGZ1bmN0aW9uKGUpIHtcbiAgICB2YXIgb3JnRXZlbnQgPSBlLm9yaWdpbmFsRXZlbnQ7XG4gICAgZm9yICh2YXIgaSA9IDA7IGkgPCBvcmdFdmVudC5jbGlwYm9hcmREYXRhLml0ZW1zLmxlbmd0aDsgaSsrKSB7XG4gICAgICBpZiAob3JnRXZlbnQuY2xpcGJvYXJkRGF0YS5pdGVtc1tpXS5raW5kID09IFwiZmlsZVwiICYmIG9yZ0V2ZW50LmNsaXBib2FyZERhdGEuaXRlbXNbaV0udHlwZSA9PSBcImltYWdlL3BuZ1wiKSB7XG4gICAgICAgIHZhciBpbWFnZUZpbGUgPSBvcmdFdmVudC5jbGlwYm9hcmREYXRhLml0ZW1zW2ldLmdldEFzRmlsZSgpO1xuICAgICAgICB2YXIgZmlsZVJlYWRlciA9IG5ldyBGaWxlUmVhZGVyKCk7XG4gICAgICAgIGZpbGVSZWFkZXIub25sb2FkZW5kID0gZnVuY3Rpb24oKSB7XG4gICAgICAgICAgJCgnI2I2NCcpLmh0bWwoZmlsZVJlYWRlci5yZXN1bHQpO1xuICAgICAgICB9XG4gICAgICAgIGZpbGVSZWFkZXIucmVhZEFzRGF0YVVSTChpbWFnZUZpbGUpOyBicmVhaztcbiAgICAgIH1cbiAgICB9XG4gIH0pO1xufSk7XG5cbmZ1bmN0aW9uIGVudGVyQmFzZTY0KCkge1xuaW5zZXJ0QXRDYXJldCgnaW5wdXQnLCBcIiFbXShcIiArIGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKFwiYjY0XCIpLnZhbHVlICsgXCIpXCIpO3JldHVybiBmYWxzZTtcbn1cblxuZnVuY3Rpb24gaW5zZXJ0QXRDYXJldChhcmVhSWQsIHRleHQpIHtcbiAgdmFyIHR4dGFyZWEgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZChhcmVhSWQpO1xuICBpZiAoIXR4dGFyZWEpIHtcbiAgICByZXR1cm47XG4gIH1cbiAgdmFyIHNjcm9sbFBvcyA9IHR4dGFyZWEuc2Nyb2xsVG9wO1xuICB2YXIgc3RyUG9zID0gMDtcbiAgdmFyIGJyID0gKCh0eHRhcmVhLnNlbGVjdGlvblN0YXJ0IHx8IHR4dGFyZWEuc2VsZWN0aW9uU3RhcnQgPT0gJzAnKSA/XG4gICAgXCJmZlwiIDogKGRvY3VtZW50LnNlbGVjdGlvbiA/IFwiaWVcIiA6IGZhbHNlKSk7XG4gIGlmIChiciA9PSBcImllXCIpIHtcbiAgICB0eHRhcmVhLmZvY3VzKCk7XG4gICAgdmFyIHJhbmdlID0gZG9jdW1lbnQuc2VsZWN0aW9uLmNyZWF0ZVJhbmdlKCk7XG4gICAgcmFuZ2UubW92ZVN0YXJ0KCdjaGFyYWN0ZXInLCAtdHh0YXJlYS52YWx1ZS5sZW5ndGgpO1xuICAgIHN0clBvcyA9IHJhbmdlLnRleHQubGVuZ3RoO1xuICB9IGVsc2UgaWYgKGJyID09IFwiZmZcIikge1xuICAgIHN0clBvcyA9IHR4dGFyZWEuc2VsZWN0aW9uU3RhcnQ7XG4gIH1cbiAgdmFyIGZyb250ID0gKHR4dGFyZWEudmFsdWUpLnN1YnN0cmluZygwLCBzdHJQb3MpO1xuICB2YXIgYmFjayA9ICh0eHRhcmVhLnZhbHVlKS5zdWJzdHJpbmcoc3RyUG9zLCB0eHRhcmVhLnZhbHVlLmxlbmd0aCk7XG4gIHR4dGFyZWEudmFsdWUgPSBmcm9udCArIHRleHQgKyBiYWNrO1xuICBzdHJQb3MgPSBzdHJQb3MgKyB0ZXh0Lmxlbmd0aDtcbiAgaWYgKGJyID09IFwiaWVcIikge1xuICAgIHR4dGFyZWEuZm9jdXMoKTtcbiAgICB2YXIgaWVSYW5nZSA9IGRvY3VtZW50LnNlbGVjdGlvbi5jcmVhdGVSYW5nZSgpO1xuICAgIGllUmFuZ2UubW92ZVN0YXJ0KCdjaGFyYWN0ZXInLCAtdHh0YXJlYS52YWx1ZS5sZW5ndGgpO1xuICAgIGllUmFuZ2UubW92ZVN0YXJ0KCdjaGFyYWN0ZXInLCBzdHJQb3MpO1xuICAgIGllUmFuZ2UubW92ZUVuZCgnY2hhcmFjdGVyJywgMCk7XG4gICAgaWVSYW5nZS5zZWxlY3QoKTtcbiAgfSBlbHNlIGlmIChiciA9PSBcImZmXCIpIHtcbiAgICB0eHRhcmVhLnNlbGVjdGlvblN0YXJ0ID0gc3RyUG9zO1xuICAgIHR4dGFyZWEuc2VsZWN0aW9uRW5kID0gc3RyUG9zO1xuICAgIHR4dGFyZWEuZm9jdXMoKTtcbiAgfVxuICB0eHRhcmVhLnNjcm9sbFRvcCA9IHNjcm9sbFBvcztcbn1cbjwvc2NyaXB0PiJ9" rel="nofollow noreferrer">codepen</a></h3>
  <p>The following is a tool which converts image into base64 markdown image tag.</p>
  <pre><code>&lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  
  &lt;textarea id=&quot;input&quot;&gt;&lt;/textarea&gt;
  &lt;textarea readonly placeholder=&quot;Base64 data&quot; id=&quot;b64&quot; rows=&quot;1&quot; style=&quot;width:110px&quot;&gt;&lt;/textarea&gt;
  &lt;button onclick=&quot;enterBase64()&quot;&gt;enter&lt;/button&gt;
  </code></pre>
  <ol>
  <li>When a user pastes an image onto a certain location (<em>where the cursor is blinking</em>) in the <code>&lt;textinput id=&quot;input&quot;&gt;</code>, the image's data gets converted into base64 data and is shown in <code>&lt;textinput id=&quot;b64&quot;&gt;</code>,</li>
  <li>and by clicking the <code>&lt;button&gt;</code>,  <code>![](</code> and <code>)</code> gets added to the back and front of the entire base64 data and gets pasted into <code>&lt;textinput id=&quot;input&quot;&gt;</code> at the previously selected location.</li>
  </ol>
  <p>now here are the scripts;</p>
  <pre><code> $(document).ready(function() {
    $('#input').on('paste', function(e) {
      var orgEvent = e.originalEvent;
      for (var i = 0; i &lt; orgEvent.clipboardData.items.length; i++) {
        if (orgEvent.clipboardData.items[i].kind == &quot;file&quot; &amp;&amp; orgEvent.clipboardData.items[i].type == &quot;image/png&quot;) {
          var imageFile = orgEvent.clipboardData.items[i].getAsFile();
          var fileReader = new FileReader();
          fileReader.onloadend = function() {
            $('#b64').html(fileReader.result);
          }
          fileReader.readAsDataURL(imageFile); break;
        }
      }
    });
  });
  </code></pre>
  <p>(copied and edited from <a href="https://stackoverflow.com/questions/28644340/how-do-i-get-base64-encoded-image-from-clipboard-in-internet-explorer">How do i get base64 encoded image from clipboard in internet explorer?
  </a>)</p>
  <p>this converts the pasted image into base64 data,</p>
  <pre><code>function enterBase64() {
  insertAtCaret('input', &quot;![](&quot; + document.getElementById(&quot;b64&quot;).value + &quot;)&quot;);return false;
  }
  </code></pre>
  <p>this adds <code>![](</code> and <code>)</code> at the front and back and then pastes the result to <code>&lt;textinput id=&quot;input&quot;&gt;</code>,</p>
  <pre><code>function insertAtCaret(areaId, text) {
    var txtarea = document.getElementById(areaId);
    if (!txtarea) {
      return;
    }
    var scrollPos = txtarea.scrollTop;
    var strPos = 0;
    var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ?
      &quot;ff&quot; : (document.selection ? &quot;ie&quot; : false));
    if (br == &quot;ie&quot;) {
      txtarea.focus();
      var range = document.selection.createRange();
      range.moveStart('character', -txtarea.value.length);
      strPos = range.text.length;
    } else if (br == &quot;ff&quot;) {
      strPos = txtarea.selectionStart;
    }
    var front = (txtarea.value).substring(0, strPos);
    var back = (txtarea.value).substring(strPos, txtarea.value.length);
    txtarea.value = front + text + back;
    strPos = strPos + text.length;
    if (br == &quot;ie&quot;) {
      txtarea.focus();
      var ieRange = document.selection.createRange();
      ieRange.moveStart('character', -txtarea.value.length);
      ieRange.moveStart('character', strPos);
      ieRange.moveEnd('character', 0);
      ieRange.select();
    } else if (br == &quot;ff&quot;) {
      txtarea.selectionStart = strPos;
      txtarea.selectionEnd = strPos;
      txtarea.focus();
    }
    txtarea.scrollTop = scrollPos;
  }
  </code></pre>
  <p>(copied and edited from <a href="https://stackoverflow.com/questions/64404655/enter-text-into-textinput-by-clicking-button-into-where-the-cursor-is">Enter text into textinput by clicking button into where the cursor is
  </a>)</p>
  <p>and this enables a desired text pasted onto the desired location in <code>&lt;textinput id=&quot;input&quot;&gt;</code> by clicking the button.</p>
  <p>Basically, the tool works fine, but it requires two steps as stated above. My aim here is to make this process into one: <strong>To paste an image onto <code>&lt;textinput id=&quot;input&quot;&gt;</code> and have its base64 markdown image data tag onto the cursor's location.</strong> <code>&lt;textinput id=&quot;b64&quot;&gt;</code> and the <code>button</code> is no longer needed this way.</p>
  <p>So how can I combine the second and third chunks of javascript into one and achieve this function?</p>