{"id":66246,"date":"2024-12-29T03:01:00","date_gmt":"2024-12-28T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=66246"},"modified":"2024-12-28T18:33:48","modified_gmt":"2024-12-28T08:33:48","slug":"open-file-picker-of-pdf-javascript-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/open-file-picker-of-pdf-javascript-tutorial\/","title":{"rendered":"Open File Picker of PDF Javascript Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/file_open_picker.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Open File Picker of PDF Javascript Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/file_open_picker_pdf.jpg\" title=\"Open File Picker of PDF Javascript Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Open File Picker of PDF Javascript Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Open File Picker Javascript Primer Tutorial' href='#ofpjpt'>Open File Picker Javascript Primer Tutorial<\/a> browsed for &#8230;<\/p>\n<ul>\n<li>image file &#8230; input data, and today we&#8217;d like to allow for the way to use the same <a target=\"_blank\" title='Window: showOpenFilePicker() method' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Window\/showOpenFilePicker' rel=\"noopener\">showOpenFilePicker<\/a> means by which to browse for local &#8230;<\/li>\n<li>PDF file<\/li>\n<\/ul>\n<p> &#8230; input data, it being the online world&#8217;s first choice for a &#8220;hard printout&#8221; equivalent means of data expression.  Online users use PDF for so many purposes, so us swivelling to allow for this input data type is likely to gel with what users have stored on their local devices, where the browsing takes place.<\/p>\n<p>Yesterday we &#8230;<\/p>\n<ul>\n<li>allowed for canvas means of editing image data &#8230; and today we &#8230;<\/li>\n<li>allow for the extraction of information from PDF data repositories<\/li>\n<\/ul>\n<p> &#8230; to output data options &#8230;<\/p>\n<ul>\n<li>Video<\/li>\n<li>Animated GIF<\/li>\n<li>Images<\/li>\n<li>HTML<\/li>\n<li>XML<\/li>\n<li>Excel<\/li>\n<li>Word<\/li>\n<li>Powerpoint<\/li>\n<\/ul>\n<p> &#8230; via interfacing to our inhouse <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/php_calls_pdfimages.php-----------------------GETME\" rel=\"noopener\">modified<\/a> &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\nif (isset($_POST['pdfcont']) && isset($_POST['pdfname'])) {<br \/>\n  file_put_contents('\/tmp\/' . basename(str_replace('+',' ',urldecode($_POST['pdfname']))),   base64_decode($_POST['pdfcont']));<br \/>\n  header('Location: .\/php_calls_pdfimages.php?inpath=' . urlencode('\/tmp\/') . '&convertthis=' . urlencode('' . basename(str_replace('+',' ',urldecode($_POST['pdfname'])))));<br \/>\n  exit;<br \/>\n} else if (isset($_GET['pdfcont']) && isset($_GET['pdfname'])) {<br \/>\n  file_put_contents('\/tmp\/' . basename(str_replace('+',' ',urldecode($_GET['pdfname']))),   base64_decode($_GET['pdfcont']));<br \/>\n  header('Location: .\/php_calls_pdfimages.php?inpath=' . urlencode('\/tmp\/') . '&convertthis=' . urlencode('' . basename(str_replace('+',' ',urldecode($_GET['pdfname'])))));<br \/>\n  exit;<br \/>\n}<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/php_calls_pdfimages.php-----------------------GETME\" rel=\"noopener\">php_calls_pdfimages.php<\/a> PHP interfacer to the great open source <a target=\"_blank\" title='Pdfimages' href='https:\/\/www.xpdfreader.com\/pdfimages-man.html' rel=\"noopener\">PDFimages<\/a> product <font size=1>(you can read more about interfacing to from <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/ITblog\/pdf-to-images-and-microsoft-office-on-almalinux-tutorial\/' title='PDF to Images and Microsoft Office on AlmaLinux Tutorial' rel=\"noopener\">PDF to Images and Microsoft Office on AlmaLinux Tutorial<\/a>)<\/font> now installed up at RJM Programming&#8217;s AlmaLinux web server helping out <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/file_open_picker.html-GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/file_open_picker.html-GETME\" rel=\"noopener\">file_open_picker.html<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/file_open_picker.html\" rel=\"noopener\">Open File Picker Interfacing web application<\/a> you can <a href='#ifofp'>also try, alas only successfully on non-mobile platforms (with experimental functionality), below<\/a>.<\/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\/open-file-picker-of-pdf-javascript-tutorial\/' rel=\"noopener\">Open File Picker of PDF Javascript Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ofpjpt'>Previous relevant <a target=\"_blank\" title='Open File Picker Javascript Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/open-file-picker-javascript-primer-tutorial\/' rel=\"noopener\">Open File Picker Javascript 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\/file_open_picker.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Open File Picker Javascript Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/file_open_picker.jpg\" title=\"Open File Picker Javascript Primer Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Open File Picker Javascript Primer Tutorial<\/p><\/div>\n<p>There are other ways to go about local file browsing, regarding web applications using a web browser, than the HTML input type=file element way we&#8217;ve become so fond of here at RJM Programming with <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.htm\" rel=\"noopener\">client_browsing.htm<\/a> and we&#8217;re here, today, ready to talk about &#8230;<\/p>\n<p><code><br \/>\n<a target=\"_blank\" title='Window: showOpenFilePicker() method' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Window\/showOpenFilePicker' rel=\"noopener\">Window: showOpenFilePicker() method<\/a><br \/>\n<\/code><\/p>\n<p> &#8230; described as &#8230;<\/p>\n<blockquote cite=''https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Window\/showOpenFilePicker'><p>\nThe showOpenFilePicker() method of the Window interface shows a file picker that allows a user to select a file or multiple files and returns a handle for the file(s).\n<\/p><\/blockquote>\n<p> &#8230; means of achieving this.<\/p>\n<p>Developing a &#8230;<\/p>\n<ul>\n<li>browser for local image file &#8230;<\/li>\n<li>transference of a returned &#8220;piece of data&#8221; &#8230;<\/li>\n<li>used to create an img element object &#8230; and onto &#8230;<\/li>\n<li>an HTML5 canvas element &#8230; via &#8230;<\/li>\n<li>[canvasContext].drawImage([imageElementObject],0,0) &#8230; temporarily in the parent window &#8230; and later &#8230;<\/li>\n<li>to an iframe element for an inhouse image editing via canvas web application<\/li>\n<\/ul>\n<p> &#8230; what took half the day was <font color=purple>the replacement of<\/font> with <font color=blue>this alternative response object return<\/font> as an easier means by which clientside Javascript can convert real image file data into a useful data URI which is needed to form img element content that [canvasContext].drawImage([imgElementObject],0,0) can use to get to an Image Editing scenario &#8230;<\/p>\n<p><code><br \/>\nconst pickerOpts = {<br \/>\n  types: [<br \/>\n    {<br \/>\n      description: \"Images\",<br \/>\n      accept: {<br \/>\n        \"image\/*\": [\".png\", \".gif\", \".jpeg\", \".jpg\"],<br \/>\n      },<br \/>\n    },<br \/>\n  ],<br \/>\n  excludeAcceptAllOption: true,<br \/>\n  multiple: false,<br \/>\n};<br \/>\n<br \/>\n\/\/ create a reference for our file handle<br \/>\nlet fileHandle;<br \/>\n<br \/>\nasync function getFile() {<br \/>\n  \/\/ open file picker, destructure the one element returned array<br \/>\n  [fileHandle] = await window.showOpenFilePicker(pickerOpts);<br \/>\n<br \/>\n  \/\/ run code with our fileHandle<br \/>\n  const file = await fileHandle.getFile();<br \/>\n  const content = await file.<font color=blue>arrayBuffer();<\/font> \/\/<font color=purple>text();<\/font><br \/>\n  const contents = <a target=\"_blank\" title='Thanks a lot' href='https:\/\/stackoverflow.com\/questions\/9267899\/how-can-i-convert-an-arraybuffer-to-a-base64-encoded-string' rel=\"noopener\">_arrayBufferToBase64<\/a>(content);<br \/>\n  \/\/alert('' + file.name + ' ... ' + (contents));<br \/>\n  const canvaso=document.getElementById('canvas');<br \/>\n  const context=canvaso.getContext('2d');<br \/>\n<br \/> <br \/>\n  nimg=new Image();<br \/>\n  <br \/>\n  nimg.onload = (event) =&gt; {<br \/>\n    canvaso.width=event.target.width;<br \/>\n    canvaso.height=event.target.height;<br \/>\n    context.drawImage(event.target, 0, 0);<br \/>\n    document.getElementById('cif').src='\/HTMLCSS\/user_of_signature_signature.html?rand=' + Math.floor(Math.random() * 1987867);<br \/>\n    document.getElementById('cif').style.display='block';<br \/>\n  };<br \/>\n  <br \/>\n  nimg.src='data:image\/' + file.name.split('.')[eval(-1 + file.name.split('.').length)].split('?')[0].split('#')[0].toLowerCase().replace('jpg','jpeg') + ';base64,' + ((((contents))));<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; within today&#8217;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/file_open_picker.html_GETME\" rel=\"noopener\">proof of concept<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/file_open_picker.html\" rel=\"noopener\">Show Open File Picker Image Editing<\/a> web application you can also try, alas only successfully on non-mobile platforms (with experimental functionality), below &#8230;<\/p>\n<p><iframe id=ifofp src=\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/file_open_picker.html\" rel=\"noopener\" style=\"width:100%;height:1200px;\"><\/iframe><\/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='#d66232' onclick='var dv=document.getElementById(\"d66232\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/picker\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d66232' 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='#d66246' onclick='var dv=document.getElementById(\"d66246\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/pdf\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d66246' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Yesterday&#8217;s Open File Picker Javascript Primer Tutorial browsed for &#8230; image file &#8230; input data, and today we&#8217;d like to allow for the way to use the same showOpenFilePicker means by which to browse for local &#8230; PDF file &#8230; &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/open-file-picker-of-pdf-javascript-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":[5039,1993,184,4286,1654,2570,418,5042,5040,2106,576,578,590,599,652,4772,849,5041,913,4616,3120,997,2124,5043],"class_list":["post-66246","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-arraybuffer","tag-browse","tag-canvas","tag-clientside","tag-data-uri","tag-edit","tag-file","tag-file-handler","tag-file-picker","tag-hard-copy","tag-html","tag-html5","tag-image","tag-img","tag-javascript","tag-local-file","tag-object","tag-open-file-picker","tag-pdf","tag-picker","tag-printout","tag-programming","tag-response","tag-response-object"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/66246"}],"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=66246"}],"version-history":[{"count":14,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/66246\/revisions"}],"predecessor-version":[{"id":66267,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/66246\/revisions\/66267"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=66246"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=66246"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=66246"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}