{"id":1535,"date":"2018-10-23T13:05:30","date_gmt":"2018-10-23T12:05:30","guid":{"rendered":"https:\/\/solidt.eu\/site\/?p=1535"},"modified":"2018-10-23T13:05:30","modified_gmt":"2018-10-23T12:05:30","slug":"html-paste-clipboard-image-example","status":"publish","type":"post","link":"https:\/\/solidt.eu\/site\/html-paste-clipboard-image-example\/","title":{"rendered":"Html paste clipboard image example"},"content":{"rendered":"<pre class=\"lang:xhtml decode:true \" title=\"paste-clipboard-image.html\">&lt;div id=\"files\"&gt;&lt;\/div&gt;\r\n\r\n&lt;script&gt;\r\n\tconst $add = (p, type, text) =&gt; {\r\n\t\tconst t = document.createTextNode(text);\r\n\t\tconst e = document.createElement(type);\r\n\t\te.appendChild(t);\r\n\t\tp.appendChild(e);\r\n\t};\r\n\tconst listenPaste = (element, targetEl) =&gt; {\r\n\t\telement.addEventListener('paste', (event) =&gt; {\r\n\t\t\tconst clipboardData = event.clipboardData;\r\n\t\t\tconst files = Array.from(clipboardData.files);\r\n\t\t\tfiles.forEach((file, i) =&gt; {\r\n\t\t\t\tconst imageType = \/image.*\/;\r\n\t\t\t\tif (file.type.match(imageType)) {\r\n\t\t\t\t\tconst reader = new FileReader();\r\n\t\t\t\t\treader.addEventListener('load', () =&gt; {\r\n\t\t\t\t\t\tconst img = new Image();\r\n\t\t\t\t\t\timg.src = reader.result;\r\n\t\t\t\t\t\t$add(targetEl, 'div', `[${file.name} ${file.size} ${file.type} ${file.lastModified}]`);\r\n\t\t\t\t\t\ttargetEl.appendChild(img);\r\n\t\t\t\t\t});\r\n\t\t\t\t\treader.readAsDataURL(file);\r\n\t\t\t\t}\r\n\t\t\t});\r\n\t\t});\r\n\t};\r\n\twindow.addEventListener('load', () =&gt; {\r\n\t\tconst fileBox = document.getElementById('files');\r\n\t\tlistenPaste(window, fileBox)\r\n\t});\r\n&lt;\/script&gt;\r\n<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&lt;div id=&#8221;files&#8221;&gt;&lt;\/div&gt; &lt;script&gt; const $add = (p, type, text) =&gt; { const t = document.createTextNode(text); const e = document.createElement(type); e.appendChild(t); p.appendChild(e); }; const listenPaste = (element, targetEl) =&gt; { element.addEventListener(&#8216;paste&#8217;, (event) =&gt; { const clipboardData = event.clipboardData; const files = Array.from(clipboardData.files); files.forEach((file, i) =&gt; { const imageType = \/image.*\/; if (file.type.match(imageType)) { const reader = [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[5],"tags":[],"class_list":["post-1535","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/1535","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/comments?post=1535"}],"version-history":[{"count":1,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/1535\/revisions"}],"predecessor-version":[{"id":1536,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/1535\/revisions\/1536"}],"wp:attachment":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/media?parent=1535"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/categories?post=1535"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/tags?post=1535"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}