{"id":72515,"date":"2026-04-04T03:01:00","date_gmt":"2026-04-03T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=72515"},"modified":"2026-04-03T19:01:47","modified_gmt":"2026-04-03T09:01:47","slug":"one-image-website-onpaste-uploading-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/one-image-website-onpaste-uploading-tutorial\/","title":{"rendered":"One Image Website Onpaste Uploading Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/streetart\/\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"One Image Website Onpaste Uploading Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/streetart\/better_uploading.gif\" title=\"One Image Website Onpaste Uploading Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">One Image Website Onpaste Uploading Tutorial<\/p><\/div>\n<p>The <i>onpaste<\/i> event referencing work of the recent <a title='Using Document Writeln Onpaste Tutorial' href='#udwot'>Using Document Writeln Onpaste Tutorial<\/a> set us to thinking about the unwieldy nature of our &#8220;One Image Website&#8221; series of photographic projects ability to, on the fly, these days &#8230;<\/p>\n<ul>\n<li>take a new relevant photograph (on an iPhone, for instance) &#8230; and then easily &#8230;<\/li>\n<li>get some functionality on the &#8220;One Image Websites&#8221; (our Guinea Pig, here, being our Street Art project) to accept either &#8230;\n<ol>\n<li>graphical image Copy into buffer via some Edit-&gt;Select All, Edit-&gt;Copy (eg. within an Image Editor desktop application) (combination) option Edit-&gt;Paste<sup>d<\/sup> into a new HTML span contenteditable=true <i>onpaste<\/i> and <i>onblur<\/i> savvy events &#8220;uploading&#8221; helper &#8230; or &#8230;<\/li>\n<li>right click at first webpage (of one of these &#8220;One Image Website&#8221; projects) to get to a prompt window that can accept a data URI the likes of which Google Image Search (say, of &#8220;clipart&#8221;)-&gt;right click-&gt;Copy Image Address could glean for you as a representation of an image<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p>Where&#8217;s the security and moderation here?  Any upload operation needs to worry about that, huh?!   Well, we limit it via <i>IP addres<\/i>s at this stage, in our Guinea Pig start to proceedings, and will monitor over time.<\/p>\n<p>Let&#8217;s start, codewise with the pretty well self contained PHP block of code that is new for this work &#8230;<\/p>\n<p><code><br \/>\n&lt;?php<br \/>\n<br \/>\n  <i>$oklist=['0::1', '1.156.90.221'];<\/i><br \/>\n<br \/>\n  function server_remote_addr() {<br \/>\n    global $ris;<br \/>\n    $rma = $_SERVER['REMOTE_ADDR'];<br \/>\n    if ($rma != \"\") {<br \/>\n      $qris = $rma;<br \/>\n    } else if ($rma == \"\") {<br \/>\n      $rma = $qris;<br \/>\n    }<br \/>\n    $ua = strtolower($_SERVER['HTTP_USER_AGENT']);<br \/>\n    \/\/ you can add different browsers with the same way ..<br \/>\n    if(preg_match('\/(chromium)[ \\\/]([\\w.]+)\/', $ua))<br \/>\n            $rma = '000000'.$rma;<br \/>\n    elseif(preg_match('\/(chrome)[ \\\/]([\\w.]+)\/', $ua))<br \/>\n            $rma = '00000'.$rma;<br \/>\n    elseif(preg_match('\/(safari)[ \\\/]([\\w.]+)\/', $ua))<br \/>\n            $rma = '0000'.$rma;<br \/>\n    elseif(preg_match('\/(opera)[ \\\/]([\\w.]+)\/', $ua))<br \/>\n            $rma = '000'.$rma;<br \/>\n    elseif(preg_match('\/(msie)[ \\\/]([\\w.]+)\/', $ua))<br \/>\n            $rma = '00'.$rma;<br \/>\n    elseif(preg_match('\/(mozilla)[ \\\/]([\\w.]+)\/', $ua))<br \/>\n            $rma = '0'.$rma;<br \/>\n    \/\/echo \"&lt;p&gt;\".$ua.$rma.\"&lt;\/p&gt;\";<br \/>\n    return $rma;<br \/>\n  }<br \/>\n<br \/>\n  if (isset($_GET['getmeip'])) {<br \/>\n    $okipwise=false;<br \/>\n    $visip=server_remote_addr();<br \/>\n    for ($inb=0; $inb&lt;sizeof($oklist); $inb++) {<br \/>\n        if (strpos($visip . '!', $oklist[$inb] . '!') !== false) {<br \/>\n          $okipwise=true;<br \/>\n        }<br \/>\n    }<br \/>\n    if ($okipwise) {<br \/>\n      echo '[\"' . server_remote_addr() . '\"]';<br \/>\n    } else {<br \/>\n      echo '[\"\",\"' . server_remote_addr() . '\"]';<br \/>\n    }<br \/>\n    exit;<br \/>\n  } else if (isset($_GET['diris']) && isset($_GET['prefixis']) && isset($_GET['startsuffix']) && isset($_GET['endsuffix'])) {<br \/>\n    $arrbit='';<br \/>\n    if ($_GET['prefixis'] != '' && $_GET['diris'] != '' && $_GET['startsuffix'] != '' && $_GET['endsuffix'] != '') {<br \/>\n     foreach(glob(str_replace('+',' ',urldecode($_GET['diris'])) . DIRECTORY_SEPARATOR . str_replace('+',' ',urldecode($_GET['prefixis'])) . '*.*g*') as $filename) {<br \/>\n        if (strpos($filename, str_replace('+',' ',urldecode($_GET['diris'])) . DIRECTORY_SEPARATOR . str_replace('+',' ',urldecode($_GET['prefixis']))) !== false) {<br \/>\n          $restfnamebit=explode('.', explode(str_replace('+',' ',urldecode($_GET['diris'])) . DIRECTORY_SEPARATOR . str_replace('+',' ',urldecode($_GET['prefixis'])), $filename)[1])[0];<br \/>\n          if ($restfnamebit &lt; str_replace('+',' ',urldecode($_GET['startsuffix'])) || $restfnamebit &gt; str_replace('+',' ',urldecode($_GET['endsuffix']))) {<br \/>\n           if ($arrbit == '') {<br \/>\n            $arrbit='[\"' . $filename . '\"]';<br \/>\n           } else {<br \/>\n            $arrbit=str_replace(']', ',\"' . $filename . '\"]', $arrbit);<br \/>\n           }<br \/>\n          }<br \/>\n        }<br \/>\n     }<br \/>\n     if ($arrbit == '') {<br \/>\n       echo \"[]\";<br \/>\n     } else {<br \/>\n       echo $arrbit;<br \/>\n     }<br \/>\n     exit;<br \/>\n    }<br \/>\n    echo \"[]\";<br \/>\n    exit;<br \/>\n  } else if (isset($_POST['newdurl']) && isset($_POST['diris']) && isset($_POST['prefixis']) && isset($_POST['startsuffix']) && isset($_POST['endsuffix'])) {<br \/>\n    if (strpos(str_replace(' ','+',urldecode($_POST['newdurl'])), 'data:image\/') !== false && $_POST['prefixis'] != '' && $_POST['diris'] != '' && $_POST['startsuffix'] != '' && $_POST['endsuffix'] != '') {<br \/>\n      <i>$okipwise=false;<br \/>\n      $visip=server_remote_addr();<br \/>\n      for ($inb=0; $inb&lt;sizeof($oklist); $inb++) {<br \/>\n        if (strpos($visip . '!', $oklist[$inb] . '!') !== false) {<br \/>\n          $okipwise=true;<br \/>\n        }<br \/>\n      }<br \/>\n      if ($okipwise) {<\/i><br \/>\n      $proposedext='.' . str_replace('jpeg','jpg',explode(';',explode(',',explode('data:image\/', str_replace(' ','+',urldecode($_POST['newdurl'])))[1])[0])[0]);<br \/>\n      if (strpos($proposedext, 'g') !== false) {<br \/>\n        $fidea=str_replace('+',' ',urldecode($_POST['endsuffix']));<br \/>\n        $isthere=true;<br \/>\n        $fnameproposed='';<br \/>\n        while ($isthere) {<br \/>\n         $isthere=false;<br \/>\n         foreach(glob(str_replace('+',' ',urldecode($_POST['diris'])) . DIRECTORY_SEPARATOR . str_replace('+',' ',urldecode($_POST['prefixis'])) . $fidea . '.*g*') as $filename) {<br \/>\n          $isthere=true;<br \/>\n         }<br \/>\n         if (!$isthere) {<br \/>\n           $fnameproposed=str_replace('+',' ',urldecode($_POST['diris'])) . DIRECTORY_SEPARATOR . str_replace('+',' ',urldecode($_POST['prefixis'])) . $fidea . $proposedext;<br \/>\n         } else {<br \/>\n           $fidea++;<br \/>\n         }<br \/>\n        }<br \/>\n        if ($fnameproposed != '') {<br \/>\n         file_put_contents($fnameproposed, base64_decode(explode(\";base64,\", str_replace(' ','+',urldecode($_POST['newdurl'])))[1]));<br \/>\n        }<br \/>\n      }<br \/>\n      <i>}<\/i><br \/>\n    }<br \/>\n    exit;<br \/>\n  }<br \/>\n?&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; and then there is some new &#8220;fetch&#8221; and Ajax rich HTML and Javascript as per &#8230;<\/p>\n<table>\n<tr>\n<th>New <font color=purple>Global Variables<\/font> and <font color=blue>Asynchronous<\/font> section Javascript &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n<code><br \/>\n<font color=purple>var myxhr=null, formis=null;<br \/>\nvar ipuvalid=true, ipis='';<\/font><br \/>\n<br \/>\nimage_list = new Array();<br \/>\n<br \/>\n<font color=blue>\/\/ Thanks to https:\/\/stackoverflow.com\/questions\/74997800\/how-to-code-a-synchronous-wrapper-for-jquery-ajax-functions<br \/>\n(async () =&gt; {<br \/>\n<br \/>\n  const resip = await fetch(\".\/index.php?getmeip=\" + Math.floor(Math.random() * 198978675), {\/* options here *\/});<br \/>\n  const dataip = await resip.json();<br \/>\n<br \/>\n  for (var inmip=0; inmip&lt;dataip.length; inmip++) {<br \/>\n    if (inmip == eval(-1 + dataip.length)) {<br \/>\n      ipis='' + dataip[inmip];<br \/>\n      if (inmip != 0) {<br \/>\n        ipuvalid=false;<br \/>\n        setTimeout(nag, 200);<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n<br \/>\n})();<br \/>\n<br \/>\n\/\/ Thanks to https:\/\/stackoverflow.com\/questions\/74997800\/how-to-code-a-synchronous-wrapper-for-jquery-ajax-functions<br \/>\n(async () =&gt; {<br \/>\n<br \/>\n  const res = await fetch(\".\/index.php?diris=images&prefixis=DSC_0&startsuffix=279&endsuffix=364\", {\/* options here *\/});<br \/>\n  const data = await res.json();<br \/>\n<br \/>\n  for (var inm=0; inm&lt;data.length; inm++) {<br \/>\n    image_list[image_index++] = new imageItem(data[inm]);<br \/>\n    console.log('Added ' + data[inm]);<br \/>\n  }<br \/>\n<br \/>\n  console.log(data);<br \/>\n  console.log(\"Some code after that uses data\");<br \/>\n<br \/>\n})();<\/font><br \/>\n<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0279.jpg');<br \/>\n<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0280.jpg');<br \/>\n<br \/>\n\/\/ more usual code follows<br \/>\n<\/code>\n<\/td>\n<\/tr>\n<tr>\n<th>New Javascript functions &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n<code><br \/>\nfunction nag() {<br \/>\n          if (document.getElementById('imgcopycheck')) {<br \/>\n            document.getElementById('imgcopycheck').title+='  Sorry, we cannot authorize uploads here.';<br \/>\n            document.getElementById('imgcopycheck').disabled=true;<br \/>\n            document.getElementById('imgcopycheck').style.visibility='hidden';<br \/>\n          } else {<br \/>\n            setTimeout(nag, 200);<br \/>\n          }<br \/>\n}<br \/>\n<br \/>\n  function getipvalid() {<br \/>\n    return ipuvalid;<br \/>\n  }<br \/>\n<br \/>\n  function uplitc(icontis) {<br \/>\n     if (icontis.indexOf('data:image\/') == 0) {<br \/>\n       myxhr = new XMLHttpRequest();<br \/>\n       formis = new FormData();<br \/>\n       formis.append('diris', 'images');<br \/>\n       formis.append('prefixis', 'DSC_0');<br \/>\n       formis.append('startsuffix', '279');<br \/>\n       formis.append('endsuffix', '364');<br \/>\n       formis.append('newdurl', icontis);<br \/>\n       myxhr.open('POST', '.\/index.php'); \/\/, true);<br \/>\n       myxhr.send(formis);<br \/>\n     }<br \/>\n  }<br \/>\n<br \/>\n  function uplit(divo) {<br \/>\n     var icontis='';<br \/>\n     if (divo.innerHTML.indexOf('data:image\/') == 0) {<br \/>\n       icontis=divo.innerHTML;<br \/>\n       divo.innerHTML='';<br \/>\n       divo.title=icontis;<br \/>\n       myxhr = new XMLHttpRequest();<br \/>\n       formis = new FormData();<br \/>\n       formis.append('diris', 'images');<br \/>\n       formis.append('prefixis', 'DSC_0');<br \/>\n       formis.append('startsuffix', '279');<br \/>\n       formis.append('endsuffix', '364');<br \/>\n       formis.append('newdurl', icontis);<br \/>\n       myxhr.open('POST', '.\/index.php'); \/\/, true);<br \/>\n       myxhr.send(formis);<br \/>\n     } else if (divo.innerHTML.indexOf('\"data:image\/') != -1) {<br \/>\n       icontis='data:image\/' + divo.innerHTML.split('data:image\/')[1].split('\"')[0];<br \/>\n       divo.innerHTML='';<br \/>\n       divo.title=icontis;<br \/>\n       myxhr = new XMLHttpRequest();<br \/>\n       formis = new FormData();<br \/>\n       formis.append('diris', 'images');<br \/>\n       formis.append('prefixis', 'DSC_0');<br \/>\n       formis.append('startsuffix', '279');<br \/>\n       formis.append('endsuffix', '364');<br \/>\n       formis.append('newdurl', icontis);<br \/>\n       myxhr.open('POST', '.\/index.php'); \/\/, true);<br \/>\n       myxhr.send(formis);<br \/>\n     }<br \/>\n  }<br \/>\n<\/code>\n<\/td>\n<\/tr>\n<tr>\n<th>New HTML <font color=magenta>span<\/font> element &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n<code><br \/>\n&lt;a id=\"thedivlink\" style=\"display:block;\" title=\"Click for Temple of Groovy provided by http:\/\/www.freesoundtrackmusic.com\" alt=\"Street Art - RJM Programming ... you might see this while loading ... click here now to just play music (Temple of Groovy provided by http:\/\/www.freesoundtrackmusic.com) with less variety of imagery ... else please wait for full functionality ...\" onclick=\"javascript: window.open('index-ssmhalf.html','Street Art  -  Soul Tracker Mechanism (via http:\/\/www.freesoundtrackmusic.com) - RJM Programming - http:\/\/www.rjmprogramming.com.au (Copyright &copy; 2011 rjmprogramming.com.au all rights reserved.)');\" alt=\"Street Art - RJM Programming ... you might see this while loading ... click here now to just play music (Temple of Groovy provided by http:\/\/www.freesoundtrackmusic.com) with less variety of imagery ... else please wait for full functionality ...\" title=\"Click for Temple of Groovy provided by http:\/\/www.freesoundtrackmusic.com\" href=\"sound\/Temple_of_Groovy-freesoundtrackmusic.mp3\" &gt;Street Art - RJM Programming ... you might see this while loading ... click here now to just play music (Temple of Groovy provided by http:\/\/www.freesoundtrackmusic.com) with less variety of imagery ... else please wait for full functionality ...&lt;\/a&gt;<font color=magenta>&amp;nbsp;&lt;span title=\"Image copy paste here to upload that way.\" onclick=\"event.stopPropagation();\" onblur=\"uplit(this);\" onpaste=\"uplit(this);\" contenteditable=true id=\"imgcopycheck\" style=\"border:2px dotted red;width:50px;height:25px;display:inline-block;\"&gt;&amp;#x2B06;&amp;#xFE0F; &amp;#x1F5BC;&amp;#xFE0F;&lt;\/span&gt;<\/font><br \/>\n<\/code>\n<\/td>\n<\/tr>\n<\/table>\n<p> &#8230; that is &#8220;undercover&#8221; to most trying out our <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/streetart\/\" rel=\"noopener\">Street Art<\/a> &#8220;One Image Website&#8221; project.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/new-using-document-writeln-onpaste-tutorial\/' rel=\"noopener\">New Using Document Writeln Onpaste Tutorial<\/a>.<\/p-->\n<hr>\n<p id='udwot'>Previous relevant <a target=\"_blank\" title='Using Document Writeln Onpaste Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/using-document-writeln-onpaste-tutorial\/' rel=\"noopener\">Using Document Writeln Onpaste Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/using_writeln.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Using Document Writeln Onpaste Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/using_writeln.gif\" title=\"Using Document Writeln Onpaste Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Using Document Writeln Onpaste Tutorial<\/p><\/div>\n<p>Regarding yesterday&#8217;s <a title='Using Document Writeln Primer Tutorial' href='#udwpt'>Using Document Writeln Primer Tutorial<\/a> you might wonder &#8230;<\/p>\n<blockquote><p>\nWhy involve either\/both textarea and div (contenteditable=true) elements as &#8220;containers&#8221; of content?\n<\/p><\/blockquote>\n<p>Well, with yesterday&#8217;s starting <i>onblur<\/i> (just) event gambit, it&#8217;s a very pertinent question, but, today, we introduce <i>onpaste<\/i> event work, and involving this event with the <i>div<\/i> element can have it distinguishing itself, able to accept graphical (eg. image) content.  For example, the user can have their cursor placed into the <i>div<\/i> element and have been in an image editor having Edit-&gt;Select All<sup>ed<\/sup> and Edit-&gt;Copy<sup>ed<\/sup> graphical content, then that can be Edit-&gt;Paste<sup>d<\/sup> into the <i>div<\/i> as graphical content.<\/p>\n<p>As you might imagine, this opens a Pandora&#8217;s Box of possibilities regarding image sizing, but we apply inline CSS styling &#8230;<\/p>\n<p><code><br \/>\n style='object-fit:contain;width:100%;height:100%;'<br \/>\n<\/code><\/p>\n<p> &#8230; to the <i>img<\/i> data URI<sup>ed<\/sup> element within the <i>div<\/i> element that happens when graphical content is pasted into it, so that the graphical data is unlikely to spill too far outside the <i>div<\/i> bounds, assuming only one image is pasted, that is.<\/p>\n<p>So feel free to try <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/using_writeln.html-GETME\" rel=\"noopener\">a changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/using_writeln.html-GETME\" rel=\"noopener\">using_writeln.html<\/a> first draft <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/using_writeln.html\" rel=\"noopener\">Using (Document) Writeln<\/a> web application for you to try yourself.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/using-document-writeln-onpaste-tutorial\/' rel=\"noopener\">Using Document Writeln Onpaste Tutorial<\/a>.<\/p-->\n<hr>\n<p id='udwpt'>Previous relevant <a target=\"_blank\" title='Using Document Writeln Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/using-document-writeln-primer-tutorial\/' rel=\"noopener\">Using Document Writeln Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/using_writeln.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Using Document Writeln Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/using_writeln.jpg\" title=\"Using Document Writeln Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Using Document Writeln Primer Tutorial<\/p><\/div>\n<p>The other day we stumbled on some advice leading us to use &#8230;<\/p>\n<p><code><br \/>\ndocument.<a target=\"_blank\" href='https:\/\/www.w3schools.com\/jsref\/met_doc_writeln.asp' rel=\"noopener\">writeln<\/a>([html-content]);<br \/>\n<\/code><\/p>\n<p> &#8230; rather than our usual &#8220;go to&#8221; &#8230;<\/p>\n<p><code><br \/>\ndocument.<a target=\"_blank\" href='https:\/\/www.w3schools.com\/jsref\/met_doc_write.asp' rel=\"noopener\">write<\/a>([html-content]);<br \/>\n<\/code><\/p>\n<p>And so we wrote a &#8220;proof of concept&#8221; <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/using_writeln.html_GETME\" rel=\"noopener\">using_writeln.html<\/a> first draft <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/using_writeln.html\" rel=\"noopener\">Using (Document) Writeln<\/a> web application for you to try yourself.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d71711' onclick='var dv=document.getElementById(\"d71711\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/privacy\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d71711' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d72462' onclick='var dv=document.getElementById(\"d72462\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/onpaste\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d72462' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d72515' onclick='var dv=document.getElementById(\"d72515\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/upload\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d72515' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The onpaste event referencing work of the recent Using Document Writeln Onpaste Tutorial set us to thinking about the unwieldy nature of our &#8220;One Image Website&#8221; series of photographic projects ability to, on the fly, these days &#8230; take a &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/one-image-website-onpaste-uploading-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,12,14,29,30,37],"tags":[69,1614,2361,354,400,5458,576,590,629,652,860,864,4267,931,932,997,1114,1319,1343,1418,1421],"class_list":["post-72515","post","type-post","status-publish","format-standard","hentry","category-ajax","category-elearning","category-event-driven-programming","category-operating-system","category-photography","category-tutorials","tag-ajax","tag-asynchronous","tag-await","tag-dom","tag-event","tag-fetch","tag-html","tag-image","tag-ip-address","tag-javascript","tag-onblur","tag-one-image-website","tag-onpaste","tag-photography","tag-php","tag-programming","tag-security","tag-tutorial","tag-upload","tag-webpage","tag-website"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/72515"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=72515"}],"version-history":[{"count":4,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/72515\/revisions"}],"predecessor-version":[{"id":72519,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/72515\/revisions\/72519"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=72515"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=72515"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=72515"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}