{"id":43728,"date":"2019-02-21T03:01:11","date_gmt":"2019-02-20T17:01:11","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=43728"},"modified":"2019-02-20T20:43:55","modified_gmt":"2019-02-20T10:43:55","slug":"javascript-and-php-base64-media-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-and-php-base64-media-tutorial\/","title":{"rendered":"Javascript and PHP Base64 Media Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/btoa_atob_base64.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Javascript and PHP Base64 Media Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/btoa_more.jpg\" title=\"Javascript and PHP Base64 Media Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Javascript and PHP Base64 Media Tutorial<\/p><\/div>\n<p>It&#8217;s likely that if you use <a target=_blank title='Base64 information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Base64'>Base64<\/a> a lot with your web applications whether that involves Javascript client &#8230;.<\/p>\n<ul>\n<li><a target=_blank title='Javascript btoa information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/met_win_btoa.asp'>btoa<\/a><\/li>\n<li><a target=_blank title='Javascript atob information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/met_win_atob.asp'>atob<\/a><\/li>\n<\/ul>\n<p> &#8230; or some serverside language functions like PHP&#8217;s &#8230;<\/p>\n<ul>\n<li><a target=_blank title='PHP base64_decode() method information' href='http:\/\/php.net\/manual\/en\/function.base64-decode.php'>base64_decode<\/a><\/li>\n<li><a target=_blank title='PHP base64_encode() method information' href='http:\/\/php.net\/manual\/en\/function.base64-encode.php'>base64_encode<\/a><\/li>\n<\/ul>\n<p> &#8230; you will have used it when accessing, or displaying or uploading media, via HTML clientside &#8230;<\/p>\n<ul>\n<li>image via HTML <a target=_blank title='HTML img information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_img.asp'>img<\/a> element or as a background image to other HTML elements, as we deploy functionality for today<\/li>\n<li>audio via HTML <a target=_blank href='http:\/\/www.w3schools.com\/html\/html5_audio.asp' title='HTML audio tag information from w3schools'>audio<\/a> element<\/li>\n<li>video via HTML <a target=_blank href='http:\/\/www.w3schools.com\/html\/html5_video.asp' title='HTML video tag information from w3schools'>video<\/a> element<\/li>\n<\/ul>\n<p> &#8230; and along with Base64 you may have used <a target=_blank title='Data URI information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Data_URI_scheme'>data URI<\/a> data to define this media content.  With this media data we are lucky having written this web application in PHP where we can involve its <a target=_blank title='file_get_contents' href='http:\/\/us1.php.net\/file_get_contents'>file_get_contents<\/a> function to be able to handle the user entering &#8230;<\/p>\n<ul>\n<li>an absolute media URL &#8230; where we match up extensions to <a target=_blank title='MIME information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/MIME'>mime types<\/a> as the mechanism to tell the HTML what type of data to expect with audio or video data &#8230; versus &#8230;<\/li>\n<li>a browse button can have the user pick out a local disk media file to use, which involved &#8220;shape to upload&#8221; logic featuring the great HTML5 <a target=_blank title='Great link' href='http:\/\/www.html5rocks.com\/en\/tutorials\/file\/dndfiles\/'>File API<\/a> ideas<\/li>\n<\/ul>\n<p>To see what we mean here, feel free to try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/btoa_atob_base64.php-GETME\" title=\"btoa_atob_base64.php\">the changed<\/a><\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/btoa_atob_base64.php-GETME\" title=\"btoa_atob_base64.php\">btoa_atob_base64.php<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/btoa_atob_base64.php\" title=\"Click picture\">live run<\/a> link.<\/p>\n<hr>\n<p id='jphpb64pt'>Previous relevant <a target=_blank title='Javascript and PHP Base64 Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-and-php-base64-primer-tutorial\/'>Javascript and PHP Base64 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\/PHP\/btoa_atob_base64.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Javascript and PHP Base64 Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/btoa_atob_base64.jpg\" title=\"Javascript and PHP Base64 Primer Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Javascript and PHP Base64 Primer Tutorial<\/p><\/div>\n<p>We&#8217;ve long been interested in all of the PHP functions&#8230;<\/p>\n<ul>\n<li><a target=_blank title='PHP urldecode() method information' href='http:\/\/php.net\/manual\/en\/function.urldecode.php'>urldecode<\/a><\/li>\n<li><a target=_blank title='PHP urlencode() method information' href='http:\/\/php.net\/manual\/en\/function.urldecode.php'>urlencode<\/a> &#8230; and sometimes, especially if <a target=_blank title='Data URI information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Data_URI_scheme'>data URI<\/a> data is involved &#8230;<\/li>\n<li><a target=_blank title='PHP base64_decode() method information' href='http:\/\/php.net\/manual\/en\/function.base64-decode.php'>base64_decode<\/a><\/li>\n<li><a target=_blank title='PHP base64_encode() method information' href='http:\/\/php.net\/manual\/en\/function.base64-encode.php'>base64_encode<\/a><\/li>\n<\/ul>\n<p> &#8230; to facilitate the transfer of sizeable amounts of data within PHP or from HTML to PHP via a <a target=_blank href='http:\/\/www.w3schools.com\/html\/html_forms.asp' title='HTML form element information from w3schools'>form<\/a> (sometimes method=POST) element.<\/p>\n<p>If there is no form involved and\/or if there is a small amount of data (in a form method=GET) you could get by just with HTML to HTML and using Javascript &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Javascript decodeURIComponent() method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/jsref_decodeuricomponent.asp'>decodeURIComponent<\/a><\/li>\n<li><a target=_blank title='Javascript encodeURIComponent() method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/jsref_encodeuricomponent.asp'>encodeURIComponent<\/a><\/li>\n<\/ul>\n<p> &#8230; but just recently we had an occasion (and then another) to start getting interested in Javascript <a target=_blank title='Base64 information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Base64'>Base64<\/a> conversion usages, using &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Javascript btoa information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/met_win_btoa.asp'>btoa<\/a><\/li>\n<li><a target=_blank title='Javascript atob information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/met_win_atob.asp'>atob<\/a><\/li>\n<\/ul>\n<p> &#8230; when we presented &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Venn Diagrams Onclick Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/venn-diagrams-onclick-tutorial\/'>Venn Diagrams Onclick Tutorial<\/a> (and before that creating Flowcharts)<\/li>\n<li><a target=_blank title='HTML Square Horizontal Rule Plot Polynomial Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-square-horizontal-rule-plot-polynomial-tutorial\/'>HTML Square Horizontal Rule Plot Polynomial Tutorial<\/a><\/li>\n<\/ul>\n<p> &#8230; and if memory serves me correctly, we first started using btoa and atob to help with &#8230;<\/p>\n<ul>\n<li>creating a background image for an HTML element via a <a title='Animated GIF via PHP Writing PHP Data URI Tutorial' href='#agifphpwphpdurit'>Animated GIF via PHP Writing PHP Data URI Tutorial<\/a> animated GIF creator &#8220;PHP Writes PHP&#8221; web application that now has the option for <a target=_blank title='Data URI information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Data_URI_scheme'>data URI<\/a> (and think perhaps the reason to &#8220;go data URI&#8221; is that data URIs are great in emails where if an email attachment is downloaded a data URI (as distinct from an absolute or relative URL) is self contained and transportable) &#8230; but recently we&#8217;ve started looking at btoa and atob even more because &#8230;<\/li>\n<li>to send base64 (converted ascii or graphic data) in an HTML form to a PHP destination avoids the need that we seem to often face (but please research <a target=_blank title='HTML form enctype property information from w3schools' href='https:\/\/www.w3schools.com\/tags\/att_form_enctype.asp'>enctype<\/a> for other thoughts here) where <b>we need to<\/b> go (in PHP, something like) &#8230;<br \/>\n<code><br \/>\n $phpvar = <b>str_replace('+', ' ', <\/b>urldecode($_POST['fieldposted'])<b>)<\/b>;<br \/>\n<\/code><br \/>\n &#8230; a really kludgy and annoying thing for us because what if that $_POST[&#8216;fieldposted&#8217;] has legitimate text like &#8230;<\/p>\n<blockquote><p>\n 1 + 1 = 2<br \/>\n &#8230; not &#8230;<br \/>\n 1 + 1 = 11\n<\/p><\/blockquote>\n<p>  &#8230; to use syntax above is wrong &#8230; and so in today&#8217;s proof of concept (<a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/btoa_atob_base64.php_GETME\" title=\"btoa_atob_base64.php\">btoa_atob_base64.php<\/a>&#8216;s) <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/btoa_atob_base64.php\" title=\"Click picture\">live run<\/a> we <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/btoa_atob_base64.jpg\">deliberately entered<\/a> &#8230;<br \/>\n<code><br \/>\nThe rain +<br \/>\nin Spain +<br \/>\nfalls mainly +<br \/>\non the plain.<br \/>\n<\/code><br \/>\n &#8230; to show you that, indeed, the use of Javascript btoa at the form&#8217;s <a target=_blank title='Event onsubmit information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_onsubmit.asp'>onsubmit<\/a> (form) event can help accurately be interpreted by any destination PHP (<i>here&#8217;s looking at you, kid<\/i>) via &#8230;<\/p>\n<p>&lt;?php<br \/>\n\/\/ &#8230;<br \/>\n<code><br \/>\n  echo \"&lt;textarea id=tb64 cols=100 rows=10>\" . base64_decode(urldecode($_POST['base64'])) . \"&lt;\/textarea&gt;&lt;br&gt;\";<br \/>\n<\/code><br \/>\n\/\/ &#8230;<br \/>\n?&gt;<br \/>\n &#8230; type of PHP code, and never interpret the data incorrectly<\/li>\n<\/ul>\n<p>Clearly, if you are not asleep, you&#8217;re interested, and we hope this helps, or clarifies, a little!<\/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='#d43649' onclick='var dv=document.getElementById(\"d43649\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/base64\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d43649' 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='#d43728' onclick='var dv=document.getElementById(\"d43728\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/media\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d43728' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>It&#8217;s likely that if you use Base64 a lot with your web applications whether that involves Javascript client &#8230;. btoa atob &#8230; or some serverside language functions like PHP&#8217;s &#8230; base64_decode base64_encode &#8230; you will have used it when accessing, &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-and-php-base64-media-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":[2830,113,1653,1993,2829,1654,1606,1605,2832,1797,418,419,452,1533,576,590,652,760,1830,2732,1712,932,970,997,1319,1345,1611,2831,1369],"class_list":["post-43728","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-atob","tag-audio","tag-base64","tag-browse","tag-btoa","tag-data-uri","tag-decodeuricomponent","tag-encodeuricomponent","tag-enctype","tag-extension","tag-file","tag-file-api","tag-form","tag-get","tag-html","tag-image","tag-javascript","tag-media","tag-method","tag-mimetype","tag-onsubmit","tag-php","tag-post","tag-programming","tag-tutorial","tag-url","tag-urldecode","tag-urlencode","tag-video"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/43728"}],"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=43728"}],"version-history":[{"count":4,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/43728\/revisions"}],"predecessor-version":[{"id":43732,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/43728\/revisions\/43732"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=43728"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=43728"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=43728"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}