{"id":45339,"date":"2019-06-20T03:01:11","date_gmt":"2019-06-19T17:01:11","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=45339"},"modified":"2019-06-19T17:10:59","modified_gmt":"2019-06-19T07:10:59","slug":"file-api-file-and-reader-objects-aesthetics-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/file-api-file-and-reader-objects-aesthetics-tutorial\/","title":{"rendered":"File API File and Reader Objects Aesthetics Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.htm\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"File API File and Reader Objects Aesthetics Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing_aesthetics.jpg\" title=\"File API File and Reader Objects Aesthetics Tutorial\"   \/><\/a><p class=\"wp-caption-text\">File API File and Reader Objects Aesthetics Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='File API File and Reader Objects Primer Tutorial' href='#fapifropt'>File API File and Reader Objects Primer Tutorial<\/a> left us with a web application that presented input type=file &#8220;multiple&#8221; collected local (ie.client) file data into &#8230;<\/p>\n<ul>\n<li>new (webpage popup) window &#8230; the default, or &#8230;<\/li>\n<li>iframe<\/li>\n<\/ul>\n<p> &#8230; that latter option lacking &#8220;aesthetic&#8221; qualities, we reckon.  In thinking about how to improve the &#8220;iframe&#8221; functionality aesthetics we first thought &#8230;<\/p>\n<ul>\n<li>horizontally separating &#8230; the 4 categories of file data (image, audio, video, other) &#8230; into an HTML table, one &#8220;tr&#8221; row, with 4 &#8220;td&#8221; columns &#8230; but rejected this because any one data type (other than &#8220;audio&#8221;) could hog 100% of device width on its own &#8230; so instead we changed our thinking to code for &#8230;<\/li>\n<li>vertically separating via &#8230;\n<ol>\n<li>(our favourite <a target=_blank title='Reveal postings' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/reveal'>&#8220;reveal&#8221;<\/a> strategy pairing of) details\/summary tags (or div\/div nested for Microsoft Internet Explorer and Edge browsers) &#8230; combined with &#8230;<\/li>\n<li>horizontal rule (hr) elements<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p> &#8230; combined with event logic with that &#8220;vertical separating&#8221; whereby a first time new category of data usage&#8217;s chances of presenting the new data &#8220;above the fold&#8221; is improved (an easier and\/or more natural proposition with &#8220;vertical separating&#8221; than with &#8220;horizontal separating&#8221;, we think).<\/p>\n<p>The &#8220;details\/summary&#8221; logic is much simpler here, just involving Javascript codelines such as &#8230;<\/p>\n<p><code><br \/>\n        document.getElementById('dtlo').open=false;  \/\/ closes a details dataset<br \/>\n        document.getElementById('dtlv').open=true;   \/\/ opens a details dataset<br \/>\n<\/code><\/p>\n<p>The &#9654; &#8220;div\/div&#8221; nested iframe logic &#128315; is quite complex, involving Javascript <font color=blue>codelines<\/font> (exemplified for the image data type code) such as &#8230;<\/p>\n<p><code><br \/>\n  \/\/ global Javascript (up the top) below<br \/>\n  <font color=blue>var isIE = (navigator.appName == 'Microsoft Internet Explorer' || (navigator.appName == \"Netscape\" && navigator.appVersion.indexOf('Edge') &gt; -1));<\/font><br \/>\n  var dsplus=\"Image\";<br \/>\n  var dsprefix=\"&lt;details open&gt;&lt;summary&gt;\";  \/\/ + dsplus<br \/>\n  var dsmid=\"&lt;\/summary&gt;\";<br \/>\n  var dssuffix=\"&lt;hr&gt;&lt;\/details&gt;\";<br \/>\n<font color=blue><br \/>\n  if (isIE) {<br \/>\n   dsprefix=\"&lt;div style=vertical-align:top; id=divsummarytotalsimage style='display:inline-block;vertical-align:top;' onclick=\\\"document.getElementById('xx').style.display=document.getElementById(tdownright('xx')).style.display.replace('inline-block','no~ne').replace('none','inline-bl~ock').replace('~','');\\\"&gt;&lt;span style='display:iNlInE-bLoCk;' id=rightimage&gt;&amp;#9654;&lt;\/span&gt;&lt;span style='display:NoNe;' id=downimage&gt;&amp;#128315;&lt;\/span&gt; &lt;DIV id=divshtimage style='display:inline-block;vertical-align:top;'&gt;&lt;span id=summarytotalsimage&gt;\"; \/\/ + dsplus<br \/>\n   dsmid=\"&lt;\/span&gt;\";<br \/>\n   dssuffix=\"&lt;\/DIV&gt;&lt;hr&gt;&lt;\/div&gt;\";<br \/>\n  }<\/font><\/p>\n<p>        \/\/ snippet within readBlob() function below<br \/>\n        <font color=blue>if (dsprefix.indexOf('image') != -1) {<br \/>\n        dp='&lt;hr&gt;' + dsprefix.replace(\/xx\/g,'vb').replace(\/image\/g,'video') + 'Video' + dsmid + dssuffix;<br \/>\n        dp+=dsprefix.replace(\/xx\/g,'ab').replace(\/image\/g,'audio') + 'Audio' + dsmid + dssuffix;<br \/>\n        dp+=dsprefix.replace(\/xx\/g,'ib').replace(\/image\/g,'other') + 'Other' + dsmid + dssuffix;<br \/>\n        dp+=dsprefix.replace('iNlInE-bLoCk','none').replace('NoNe','inline-block').replace(\/xx\/g,'gb') + 'Image' + dsmid;<br \/>\n        }<\/font> else {<br \/>\n        dp=dsprefix.replace('&gt;&lt;',' id=dtlv&gt;&lt;') + 'Video&nbsp;&nbsp;' + dsmid + dssuffix;<br \/>\n        dp+=dsprefix.replace('&gt;&lt;',' id=dtla&gt;&lt;') + 'Audio&nbsp;&nbsp;' + dsmid + dssuffix;<br \/>\n        dp+=dsprefix.replace('&gt;&lt;',' id=dtlo&gt;&lt;') + 'Other&nbsp;&nbsp;' + dsmid + dssuffix;<br \/>\n        dp+=dsprefix.replace('&gt;&lt;',' id=dtli&gt;&lt;') + 'Image&nbsp;&nbsp;' + dsmid;<br \/>\n        }<br \/>\n        <font color=blue>document.getElementById('icontent').innerHTML+=dp + ipre + evt.target.result.replace('data:;', 'data:' + mfile.type + ';') + isuf + ds;<\/font><\/p>\n<p>        <font color=blue>} else if (document.getElementById('dtli') || document.getElementById('divshtimage')) {<\/font><br \/>\n        <font color=blue>if (dsprefix.indexOf('image') != -1) {<br \/>\n        if (document.getElementById('ab')) { document.getElementById(downright('ab')).style.display='none'; }<br \/>\n        if (document.getElementById('vb')) { document.getElementById(downright('vb')).style.display='none'; }<br \/>\n        if (document.getElementById('ib')) { document.getElementById(downright('ib')).style.display='none'; }<br \/>\n        document.getElementById('divshtimage').innerHTML+=ipre + evt.target.result.replace('data:;', 'data:' + mfile.type + ';') + isuf;<br \/>\n        tdownright('gb');<br \/>\n        }<\/font> else {<br \/>\n        document.getElementById('dtla').open=false;<br \/>\n        document.getElementById('dtlv').open=false;<br \/>\n        document.getElementById('dtlo').open=false;<br \/>\n        document.getElementById('dtli').open=true;<br \/>\n        document.getElementById('dtli').innerHTML+=ipre + evt.target.result.replace('data:;', 'data:' + mfile.type + ';') + isuf;<br \/>\n        }<br \/>\n        } else {<br \/>\n        document.getElementById('icontent').innerHTML+=ipre + evt.target.result.replace('data:;', 'data:' + mfile.type + ';') + isuf;<br \/>\n        }<br \/>\n        } else {<br \/>\n        wo=window.open(wp1,wp2);<br \/>\n        wo.document.write(ipre + evt.target.result.replace('data:;', 'data:' + mfile.type + ';') + isuf);<br \/>\n        wo.document.title = mfile.name.replace(\/\\\\\/g,'\/').split('\/')[eval(-1 + mfile.name.replace(\/\\\\\/g,'\/').split('\/').length)];<br \/>\n        }<br \/>\n        } \/\/ else if ... audio\/video\/other<br \/>\n<br \/>\n        \/\/ end of readBlob snippet above<br \/>\n<br \/>\n  <font color=blue>function tdownright(inid) {<br \/>\n    if (inid.substring(0,1) == 'g') {<br \/>\n      document.getElementById('rightimage').style.display=document.getElementById('rightimage').style.display.toLowerCase().replace('inline-block','no~ne').replace('none','inline-bl~ock').replace('~','');   \/\/'inline-block';<br \/>\n      document.getElementById('downimage').style.display=document.getElementById('downimage').style.display.toLowerCase().replace('inline-block','no~ne').replace('none','inline-bl~ock').replace('~','');<br \/>\n    } else if (inid.substring(0,1) == 'a') {<br \/>\n      document.getElementById('rightaudio').style.display=document.getElementById('rightaudio').style.display.toLowerCase().replace('inline-block','no~ne').replace('none','inline-bl~ock').replace('~','');<br \/>\n      document.getElementById('downaudio').style.display=document.getElementById('downaudio').style.display.toLowerCase().replace('inline-block','no~ne').replace('none','inline-bl~ock').replace('~','');<br \/>\n    } else if (inid.substring(0,1) == 'v') {<br \/>\n      document.getElementById('rightvideo').style.display=document.getElementById('rightvideo').style.display.toLowerCase().replace('inline-block','no~ne').replace('none','inline-bl~ock').replace('~','');<br \/>\n      document.getElementById('downvideo').style.display=document.getElementById('downvideo').style.display.toLowerCase().replace('inline-block','no~ne').replace('none','inline-bl~ock').replace('~','');<br \/>\n    } else if (inid.substring(0,1) == 'i') {<br \/>\n      document.getElementById('rightother').style.display=document.getElementById('rightother').style.display.toLowerCase().replace('inline-block','no~ne').replace('none','inline-bl~ock').replace('~','');<br \/>\n      document.getElementById('downother').style.display=document.getElementById('downother').style.display.toLowerCase().replace('inline-block','no~ne').replace('none','inline-bl~ock').replace('~','');<br \/>\n    }<br \/>\n    return inid;<br \/>\n  }<\/font><br \/>\n<br \/> <br \/>\n  <font color=blue>function downright(inid) {<br \/>\n    if (inid.substring(0,1) == 'g') {<br \/>\n      document.getElementById('rightimage').style.display='inline-block';<br \/>\n      document.getElementById('downimage').style.display='none';<br \/>\n    } else if (inid.substring(0,1) == 'a') {<br \/>\n      document.getElementById('rightaudio').style.display='inline-block';<br \/>\n      document.getElementById('downaudio').style.display='none';<br \/>\n    } else if (inid.substring(0,1) == 'v') {<br \/>\n      document.getElementById('rightvideo').style.display='inline-block';<br \/>\n      document.getElementById('downvideo').style.display='none';<br \/>\n    } else if (inid.substring(0,1) == 'i') {<br \/>\n      document.getElementById('rightother').style.display='inline-block';<br \/>\n      document.getElementById('downother').style.display='none';<br \/>\n    }<br \/>\n    return inid;<br \/>\n  }<\/font><br \/>\n<\/code><\/p>\n<p>Why not see what we mean at <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.html-GETME\" title=\"client_browsing.htm\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.html-GETME\" title=\"client_browsing.htm\">client_browsing.htm<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.htm\" title=\"Click picture\">live run<\/a> link?  <font size=1>Huh?<\/font><\/p>\n<hr>\n<p id='fapifropt'>Previous relevant <a target=_blank title='File API File and Reader Objects Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/file-api-file-and-reader-objects-primer-tutorial\/'>File API File and Reader Objects 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\/HTMLCSS\/client_browsing.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"File API File and Reader Objects Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.jpg\" title=\"File API File and Reader Objects Primer Tutorial\"   \/><\/a><p class=\"wp-caption-text\">File API File and Reader Objects Primer Tutorial<\/p><\/div>\n<p>Thanks to <a target=_blank title='Great link, thanks' href='https:\/\/stackoverflow.com\/questions\/12546775\/get-filename-after-filereader-asynchronously-loaded-a-file'>this great link<\/a> we discovered a better way to combine the wonders of &#8230;<\/p>\n<ul>\n<li><a target=_blank title='File object information' href='https:\/\/developer.mozilla.org\/en\/docs\/Web\/API\/File'>File<\/a> object &#8230; and &#8230;<\/li>\n<li><a target=_blank title='FileReader object information' href='https:\/\/developer.mozilla.org\/en\/docs\/Web\/API\/FileReader'>FileReader<\/a> object<\/li>\n<\/ul>\n<p> &#8230; in the scenario of a web application (remaining correct and <font color=blue>asynchronous<\/font> in its) use of an <b>input type=file &#8220;multiple&#8221; browser element<\/b> accessing the wonderful <a target=_blank title='Great link' href='http:\/\/www.html5rocks.com\/en\/tutorials\/file\/dndfiles\/'>File API<\/a>, such as &#8230;<\/p>\n<p><code><br \/>\n&lt;head&gt;<br \/>\n&lt;script type='text\/javascript'&gt;<br \/>\n  function onl() {<br \/>\n  document.<a target=_blank title='HTML DOM querySelector() Method information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/met_document_queryselector.asp'>querySelector<\/a>('.readBytesButtons').addEventListener('click', function(evt) {<br \/>\n    if (evt.target.tagName.toLowerCase() == 'button') {<br \/>\n      var startByte = evt.target.getAttribute('data-startbyte');<br \/>\n      var endByte = evt.target.getAttribute('data-endbyte');<br \/>\n      readBlob(startByte, endByte);<br \/>\n    }<br \/>\n  }, false);<br \/>\n  }<br \/>\n&lt;\/script&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body style=\"background-color:#f0f0f0;\" onload=\"onl();\"&gt;<br \/>\n<b>&lt;input onclick=\"this.value=null;\" onchange=\"document.getElementById('ibut').click();\" style='width:50%;background-color:orange;' type=\"file\" id=\"files\" name=\"file\" accept=\"image\/*,video\/*,audio\/*,application\/*,text\/*\" multiple \/&gt;<\/b><br \/>\n&lt;span class=\"readBytesButtons\"&gt;<br \/>\n  &lt;button style='display:none;' data-startbyte=\"0\" data-endbyte=\"4\"&gt;1-5&lt;\/button&gt;<br \/>\n  &lt;button style='display:none;' data-startbyte=\"5\" data-endbyte=\"14\"&gt;6-15&lt;\/button&gt;<br \/>\n  &lt;button style='display:none;' data-startbyte=\"6\" data-endbyte=\"7\"&gt;7-8&lt;\/button&gt;<br \/>\n  &lt;button id=ibut style='background-color:pink;display:none;'&gt;Send to Server Top Half&lt;\/button&gt;<br \/>\n&lt;\/span&gt;<br \/>\n<\/code><\/p>\n<p>You can see us applying <font color=blue>new ideas<\/font> to our usual readBlob (that we get to output data URIs today) &#8230;<\/p>\n<p><code><br \/>\n  function readBlob(opt_startByte, opt_stopByte) {<br \/>\n    files = document.getElementById('files').files;<br \/>\n    xx=[];<br \/>\n    yy=[];<br \/>\n    ten=500;<br \/>\n    ixy=0;<br \/>\n    awis=[];<br \/>\n    ahis=[];<br \/>\n    awx=[];<br \/>\n    awy=[];<br \/>\n    awid=[];<br \/>\n    reader=[];<br \/>\n    blob=[];<br \/>\n    var ij=0;<br \/>\n    kij=0;<br \/>\n    kkij=0;<br \/>\n    lastiw=0;<br \/>\n    lastih=0;<br \/>\n    if (!files.length) {<br \/>\n      alert('Please select a file!');<br \/>\n      return;<br \/>\n    }<br \/>\n    for (ij=0; ij&lt;files.length; ij++) {<br \/>\n    file = files[ij];<br \/>\n    filen = file.name;<br \/>\n    lasttype = file.type;<br \/>\n    fs.push(file.name.replace(\/\\\\\/g,'\/').split('\/')[eval(-1 + file.name.replace(\/\\\\\/g,'\/').split('\/').length)]);<br \/>\n    start = parseInt(opt_startByte) || 0;<br \/>\n    stop = parseInt(opt_stopByte) || file.size - 1;<br \/>\n<br \/> <br \/>\n    reader.push(new FileReader());<br \/>\n<br \/>\n    \/\/ If we use onloadend, we need to check the readyState.<br \/>\n    \/\/ Thanks to https:\/\/stackoverflow.com\/questions\/12546775\/get-filename-after-filereader-asynchronously-loaded-a-file<br \/>\n    reader[ij].onloadend = <font color=blue>(function(mfile) {<br \/>\n      return <\/font>function(evt) {<br \/>\n      if (evt.target.readyState == FileReader.DONE) { \/\/ DONE == 2<br \/>\n        if (mfile.type.indexOf('image\/') == 0) {<br \/>\n        if (document.getElementById('ibchkbox').checked) {<br \/>\n        if (document.getElementById('gb')) {<br \/>\n        document.getElementById('gb').src=evt.target.result.replace('data:;', 'data:' + mfile.type + ';');<br \/>\n        } else {<br \/>\n        document.getElementById('icontent').innerHTML+=ipre + evt.target.result.replace('data:;', 'data:' + mfile.type + ';') + isuf;<br \/>\n        }<br \/>\n        } else {<br \/>\n        wo=window.open(wp1,wp2);<br \/>\n        wo.document.write(ipre + evt.target.result.replace('data:;', 'data:' + mfile.type + ';') + isuf);<br \/>\n        wo.document.title = mfile.name.replace(\/\\\\\/g,'\/').split('\/')[eval(-1 + mfile.name.replace(\/\\\\\/g,'\/').split('\/').length)];<br \/>\n        }<br \/>\n        } else if (mfile.type.indexOf('audio\/') == 0) {<br \/>\n        if (document.getElementById('ibchkbox').checked) {<br \/>\n        if (document.getElementById('ab')) {<br \/>\n        document.getElementById('ab').src=evt.target.result.replace('data:;', 'data:' + mfile.type + ';');<br \/>\n        } else {<br \/>\n        document.getElementById('icontent').innerHTML+=apre + mfile.type + amid + evt.target.result.replace('data:;', 'data:' + mfile.type + ';') + asuf.replace('&gt;&lt;', ' id=v' + mfile.name + '&gt;&lt;');<br \/>\n        }<br \/>\n        } else {<br \/>\n        wo=window.open(wp1,wp2);<br \/>\n        wo.document.write(apre + mfile.type + amid + evt.target.result.replace('data:;', 'data:' + mfile.type + ';') + asuf.replace('&gt;&lt;', ' id=a' + mfile.name + '&gt;&lt;'));<br \/>\n        wo.document.title = mfile.name.replace(\/\\\\\/g,'\/').split('\/')[eval(-1 + mfile.name.replace(\/\\\\\/g,'\/').split('\/').length)];<br \/>\n        }<br \/>\n        } else if (mfile.type.indexOf('video\/') == 0) {<br \/>\n        if (document.getElementById('ibchkbox').checked) {<br \/>\n        if (document.getElementById('vb')) {<br \/>\n        document.getElementById('vb').src=evt.target.result.replace('data:;', 'data:' + mfile.type + ';');<br \/>\n        } else {<br \/>\n        document.getElementById('icontent').innerHTML+=vpre + mfile.type + vmid + evt.target.result.replace('data:;', 'data:' + mfile.type + ';') + vsuf.replace('&gt;&lt;', ' id=v' + mfile.name + '&gt;&lt;');<br \/>\n        }<br \/>\n        } else {<br \/>\n        wo=window.open(wp1,wp2);<br \/>\n        wo.document.write(vpre + mfile.type + vmid + evt.target.result.replace('data:;', 'data:' + mfile.type + ';') + vsuf.replace('&gt;&lt;', ' id=v' + mfile.name + '&gt;&lt;'));<br \/>\n        wo.document.title = mfile.name.replace(\/\\\\\/g,'\/').split('\/')[eval(-1 + mfile.name.replace(\/\\\\\/g,'\/').split('\/').length)];<br \/>\n        }<br \/>\n        } else {<br \/>\n        if (document.getElementById('ibchkbox').checked) {<br \/>\n        if (document.getElementById('ib')) {<br \/>\n        document.getElementById('ib').src=evt.target.result.replace('data:;', 'data:' + mfile.type + ';');<br \/>\n        } else {<br \/>\n        document.getElementById('icontent').innerHTML+=opre + evt.target.result.replace('data:;', 'data:' + mfile.type + ';') + osuf;<br \/>\n        }<br \/>\n        } else {<br \/>\n        wo=window.open(wp1,wp2);<br \/>\n        wo.document.write(opre + evt.target.result.replace('data:;', 'data:' + mfile.type + ';') + osuf);<br \/>\n        wo.document.title = mfile.name.replace(\/\\\\\/g,'\/').split('\/')[eval(-1 + mfile.name.replace(\/\\\\\/g,'\/').split('\/').length)];<br \/>\n        }<br \/>\n        }<br \/>\n      } };<br \/>\n    <font color=blue>})(files[ij]);<\/font><br \/>\n<br \/>\n    blob.push(file.slice(start, stop + 1));<br \/>\n    reader[ij].readAsDataURL(blob[ij]);<br \/>\n    kij++;<br \/>\n    }<br \/>\n  }<br \/>\n<\/code><\/p>\n<p> &#8230; featuring in our proof of concept File API &#8220;Client Browsing&#8221; <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.html_GETME\" title=\"client_browsing.html\">client_browsing.html<\/a> web application&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.html\" title=\"Click picture\">live run<\/a> link.  Notice how the File object&#8217;s &#8220;mfile.type&#8221; is used within the FileReader object&#8217;s &#8220;onloadend&#8221; event logic &#8230; a powerful combination of objects in an asynchronous scenario, that asynchronicity ensured by involving a <font color=blue>return<\/font> scenario &#8230; cute,huh?!<\/p>\n<p>You can also see this play out at WordPress 4.1.1&#8217;s <a target=_blank title='File API File and Reader Objects Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/file-api-file-and-reader-objects-primer-tutorial\/'>File API File and Reader Objects Primer Tutorial<\/a>.<\/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='#d45327' onclick='var dv=document.getElementById(\"d45327\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/filereader\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d45327' 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='#d45339' onclick='var dv=document.getElementById(\"d45339\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/reveal\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d45339' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Yesterday&#8217;s File API File and Reader Objects Primer Tutorial left us with a web application that presented input type=file &#8220;multiple&#8221; collected local (ie.client) file data into &#8230; new (webpage popup) window &#8230; the default, or &#8230; iframe &#8230; that latter &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/file-api-file-and-reader-objects-aesthetics-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":[12,14,37],"tags":[2419,88,2310,342,385,418,419,1840,576,652,849,997,1063,2311,1319,1402],"class_list":["post-45339","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-aesthetics","tag-api","tag-details","tag-div","tag-emoji","tag-file","tag-file-api","tag-filereader","tag-html","tag-javascript","tag-object","tag-programming","tag-reveal","tag-summary","tag-tutorial","tag-web-application"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/45339"}],"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=45339"}],"version-history":[{"count":4,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/45339\/revisions"}],"predecessor-version":[{"id":45344,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/45339\/revisions\/45344"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=45339"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=45339"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=45339"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}