{"id":45327,"date":"2019-06-19T03:01:00","date_gmt":"2019-06-18T17:01:00","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=45327"},"modified":"2019-06-19T07:16:31","modified_gmt":"2019-06-18T21:16:31","slug":"file-api-file-and-reader-objects-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/file-api-file-and-reader-objects-primer-tutorial\/","title":{"rendered":"File API File and Reader Objects Primer Tutorial"},"content":{"rendered":"<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>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","protected":false},"excerpt":{"rendered":"<p>Thanks to this great link we discovered a better way to combine the wonders of &#8230; File object &#8230; and &#8230; FileReader object &#8230; in the scenario of a web application (remaining correct and asynchronous in its) use of an &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/file-api-file-and-reader-objects-primer-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":[88,418,419,1840,576,652,849,997,1319,1402],"class_list":["post-45327","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-api","tag-file","tag-file-api","tag-filereader","tag-html","tag-javascript","tag-object","tag-programming","tag-tutorial","tag-web-application"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/45327"}],"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=45327"}],"version-history":[{"count":7,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/45327\/revisions"}],"predecessor-version":[{"id":45336,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/45327\/revisions\/45336"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=45327"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=45327"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=45327"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}