{"id":56680,"date":"2022-08-22T03:01:36","date_gmt":"2022-08-21T17:01:36","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=56680"},"modified":"2022-08-22T06:50:46","modified_gmt":"2022-08-21T20:50:46","slug":"file-api-file-and-reader-objects-mimetype-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/file-api-file-and-reader-objects-mimetype-tutorial\/","title":{"rendered":"File API File and Reader Objects Mimetype 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 Mimetype Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing_mimetype.jpg\" title=\"File API File and Reader Objects Primer Tutorial\"   \/><\/a><p class=\"wp-caption-text\">File API File and Reader Objects Mimetype Tutorial<\/p><\/div>\n<p>A while back with <a title='File API File and Reader Objects Primer Tutorial' href='#fapifropt'>File API File and Reader Objects Primer Tutorial<\/a> we started on a Client Browsing web application which uses &#8230;<\/p>\n<blockquote cite='\/\/www.rjmprogramming.com.au\/ITblog\/file-api-file-and-reader-objects-primer-tutorial\/'>\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<\/blockquote>\n<p> &#8230; excellent Javascript functionality which can access and read Files off your underlying (client) device file system.<\/p>\n<p>It&#8217;s been <a target=_blank title='Search' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/?s=client_browsing.htm'>changed a lot over three years<\/a> and today we tackle a <a target=_blank title='Mime information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/MIME'>mimetype<\/a> annoyance we want to work around as we create HTML &#8230;<\/p>\n<ul>\n<li>video<\/li>\n<li>audio<\/li>\n<li>img<\/li>\n<\/ul>\n<p> &#8230; media elements, the first two of which are more likely to natively work if the mimetype is an accurate reflection of the file&#8217;s data.  And yet, often off the FileReader logic, we found it often returned the mimetype &#8220;application\/octet-stream&#8221; (a mimetype often associated with email attachments).  Better would be to use the FileReader file&#8217;s &#8230;<\/p>\n<ul>\n<li>file extension &#8230; and associate that with a more apt &#8230;<\/li>\n<li>usual mimetype &#8230; <font color=blue>as per<\/font> &#8230;<br \/>\n<code><br \/>\n  <font color=blue>var mtypes = [\"audio\/x-aiff\",\"audio\/wav\",\"audio\/x-wav\",\"audio\/x-pn-realaudio\",\"audio\/x-mpegurl\",\"audio\/x-aiff\",\"audio\/mpeg\",\"audio\/mid\",<br \/>\n      \"audio\/basic\",\"audio\/ogg\",\"video\/x-sgi-movie\",\"video\/x-msvideo\",\"video\/quicktime\",\"audio\/mp3\",\"video\/mp4\",\"video\/mpeg\",<br \/>\n      \"video\/x-la-asf\",\"video\/ogg\",\"video\/webm\",\"audio\/mp4\", \"image\/jpeg\", \"image\/jpeg\", \"image\/png\", \"image\/gif\", \"image\/bmp\", \"image\/tif\"];<br \/>\n  var mexts = [\".aiff\",\".wav\",\".wav\",\".ram\",\".m3u\",\".aiff\",\".mp3\",\".rmi\",<br \/>\n      \".snd\",\".ogg\",\".movie\",\".avi\",\".mov\",\".mp3\",\".m4v\",\".mpeg\",<br \/>\n      \".lsx\",\".ogv\",\".webm\",\".m4a\", \".jpg\", \".jpeg\", \".png\", \".gif\", \".bmp\", \".tif\"];<\/font><br \/>\n<br \/>\n    reader[ij].onloadend = (function(mfile) {<br \/>\n      return function(evt) {<br \/>\n      var dp='', ds=dssuffix, slideshowparent=false, ssuffix='0', nsuffix='2', blnks=' ', xhsf='', zhsfs=[];<br \/>\n      <font color=blue>var tomt='video\/mp4', thext='', ithext=0;<\/font><br \/>\n      if (evt.target.readyState == FileReader.DONE) { \/\/ DONE == 2<br \/>\n        <font color=blue>if (mfile.type != 'application\/octet-stream') { tomt=mfile.type;   }<br \/>\n        if (mfile.name.indexOf('.') != -1) { thext='.' + mfile.name.split('.')[eval(-1 + file.name.split('.').length)].toLowerCase(); }<br \/>\n        if (thext != '') {<br \/>\n          for (ithext=0; ithext&lt;mexts.length; ithext++) {<br \/>\n            if (mexts[ithext] == thext) {<br \/>\n              tomt=mtypes[ithext];<br \/>\n            }<br \/>\n          }<br \/>\n        }<\/font><br \/>\n        \/\/ Lots of code follows ... some of which now contains evt.target.result<font color=blue>.replace('application\/octet-stream', tomt).replace('application\/octet-stream', tomt)<\/font> to get around the application\/octet-stream mimetypes<br \/>\n        \/\/<br \/>\n      }<br \/>\n      } };<br \/>\n    })(files[ij]);<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p> &#8230; in such scenarios, to improve on the chances of playing that media file successfully in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.html-------------------GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.html-------------------GETME\">client_browsing.htm<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.htm\">web application<\/a> you can try for yourself, and perhaps get to see what we mean!<\/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\/file-api-file-and-reader-objects-mimetype-tutorial\/'>File API File and Reader Objects Mimetype Tutorial<\/a>.<\/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>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='#d56680' onclick='var dv=document.getElementById(\"d56680\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/mimetype\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d56680' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>A while back with File API File and Reader Objects Primer Tutorial we started on a Client Browsing web application which uses &#8230; File object &#8230; and &#8230; FileReader object &#8230; excellent Javascript functionality which can access and read Files &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/file-api-file-and-reader-objects-mimetype-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,29,37],"tags":[113,2051,1993,3531,212,1797,418,419,2655,1840,576,590,599,652,760,792,2732,885,997,1319,1369],"class_list":["post-56680","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-operating-system","category-tutorials","tag-audio","tag-blob","tag-browse","tag-browsing","tag-client","tag-extension","tag-file","tag-file-api","tag-file-extension","tag-filereader","tag-html","tag-image","tag-img","tag-javascript","tag-media","tag-mime","tag-mimetype","tag-operating-system-2","tag-programming","tag-tutorial","tag-video"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/56680"}],"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=56680"}],"version-history":[{"count":7,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/56680\/revisions"}],"predecessor-version":[{"id":56687,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/56680\/revisions\/56687"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=56680"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=56680"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=56680"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}