Open File Picker Experimental Status Tutorial

Open File Picker Experimental Status Tutorial

The basis of yesterday’s Open File Picker of PDF Javascript Tutorial‘s functionality is showOpenFilePicker, an experimental Javascript offering.

Which begs the question, at least for us …

What is the alternative approach to trying a piece of experimental Javascript functionality, only to find your web browser environment does not support it?

Well, there is the great Javascript typeof operator fitting the bill …

The typeof operator returns the data type of a JavaScript variable.

… we’re applying, now, in our changed file_open_picker.html Open File Picker Interfacing web application …


var sofp=('' + typeof(window.showOpenFilePicker));

if (sofp != 'function') {
rectx=document.getElementById('divmypdfbut').getBoundingClientRect();
document.getElementById('divmypdfbut').style.borderLeft='1px dashed red';
document.getElementById('divmypdfbut').style.position='absolute';
document.getElementById('divmypdfbut').style.left='50%';
document.getElementById('divmypdfbut').style.top='' + rectx.top + 'px';
document.getElementById('divmypdfbut').innerHTML='<iframe onload=checkpif(this); id=ifmypdfbut frameborder=0 style="width:' + rectx.width + 'px;height:' + eval(1.5 * eval('' + rectx.height)) + 'px;" src="/php_calls_pdfimages.php?jghdjh#files"></iframe> PDF';
document.getElementById('divmypdfbut').onmouseover=function(){ document.getElementById('divmypdfbut').style.width='700px'; document.getElementById('divmypdfbut').style.height='700px'; document.getElementById('ifmypdfbut').style.width='100%'; document.getElementById('ifmypdfbut').style.height='100%'; };
document.getElementById('divmypdfbut').onmousedown=function(){ document.getElementById('divmypdfbut').style.width='700px'; document.getElementById('divmypdfbut').style.height='700px'; document.getElementById('ifmypdfbut').style.width='100%'; document.getElementById('ifmypdfbut').style.height='100%'; };
document.getElementById('divmypdfbut').ontouchdown=function(){ document.getElementById('divmypdfbut').style.width='700px'; document.getElementById('divmypdfbut').style.height='700px'; document.getElementById('ifmypdfbut').style.width='100%'; document.getElementById('ifmypdfbut').style.height='100%'; };
rectx=document.getElementById('divmybut').getBoundingClientRect();
document.getElementById('divmybut').style.backgroundColor='yellow';
document.getElementById('divmybut').style.position='absolute';
document.getElementById('divmybut').style.left='0%';
document.getElementById('divmybut').style.top='' + rectx.top + 'px';
document.getElementById('divmybut').innerHTML='<iframe onload=checkppif(this); id=ifmybut frameborder=0 style="width:' + rectx.width + 'px;height:' + eval(1.5 * eval('' + rectx.height)) + 'px;" src="/HTMLCSS/user_of_signature_signature.html?fcol=' + Math.floor(Math.random() * 19878565) + '#dcmib"></iframe> Image';
document.getElementById('divmybut').onmouseover=function(){ document.getElementById('divmybut').style.width='700px'; document.getElementById('divmybut').style.height='700px'; document.getElementById('ifmybut').style.width='700px'; document.getElementById('ifmybut').style.height='700px'; };
document.getElementById('divmybut').onmousedown=function(){ document.getElementById('divmybut').style.width='700px'; document.getElementById('divmybut').style.height='700px'; document.getElementById('ifmybut').style.width='700px'; document.getElementById('ifmybut').style.height='700px'; };
document.getElementById('divmybut').ontouchdown=function(){ document.getElementById('divmybut').style.width='700px'; document.getElementById('divmybut').style.height='700px'; document.getElementById('ifmybut').style.width='700px'; document.getElementById('ifmybut').style.height='700px'; };
}


… meaning web browsers not compatible get supplied web browser webpage functionality turning to our inhouse local file browsing client_browsing.htm specialist for alternative help, rather than giving up on the user, doing nothing, as you can try below.

Previous relevant Open File Picker of PDF Javascript Tutorial is shown below.

Open File Picker of PDF Javascript Tutorial

Yesterday’s Open File Picker Javascript Primer Tutorial browsed for …

• image file … input data, and today we’d like to allow for the way to use the same showOpenFilePicker means by which to browse for local …
• PDF file

… input data, it being the online world’s first choice for a “hard printout” 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.

Yesterday we …

• allowed for canvas means of editing image data … and today we …
• allow for the extraction of information from PDF data repositories

… to output data options …

• Video
• Animated GIF
• Images
• HTML
• XML
• Excel
• Word
• Powerpoint

… via interfacing to our inhouse modified …

<?php

if (isset($_POST['pdfcont']) && isset($_POST['pdfname'])) {
file_put_contents('/tmp/' . basename(str_replace('+',' ',urldecode($_POST['pdfname']))), base64_decode($_POST['pdfcont']));
header('Location: ./php_calls_pdfimages.php?inpath=' . urlencode('/tmp/') . '&convertthis=' . urlencode('' . basename(str_replace('+',' ',urldecode($_POST['pdfname'])))));
exit;
} else if (isset($_GET['pdfcont']) && isset($_GET['pdfname'])) {
file_put_contents('/tmp/' . basename(str_replace('+',' ',urldecode($_GET['pdfname']))), base64_decode($_GET['pdfcont']));
header('Location: ./php_calls_pdfimages.php?inpath=' . urlencode('/tmp/') . '&convertthis=' . urlencode('' . basename(str_replace('+',' ',urldecode($_GET['pdfname'])))));
exit;
}

?>

… php_calls_pdfimages.php PHP interfacer to the great open source PDFimages product (you can read more about interfacing to from PDF to Images and Microsoft Office on AlmaLinux Tutorial) now installed up at RJM Programming’s AlmaLinux web server helping out the changed file_open_picker.html Open File Picker Interfacing web application you can also try, alas only successfully on non-mobile platforms (with experimental functionality), below.

Previous relevant Open File Picker Javascript Primer Tutorial is shown below.

Open File Picker Javascript Primer Tutorial

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’ve become so fond of here at RJM Programming with client_browsing.htm and we’re here, today, ready to talk about …


Window: showOpenFilePicker() method


… described as …

The 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).

… means of achieving this.

Developing a …

• browser for local image file …
• transference of a returned “piece of data” …
• used to create an img element object … and onto …
• an HTML5 canvas element … via …
• [canvasContext].drawImage([imageElementObject],0,0) … temporarily in the parent window … and later …
• to an iframe element for an inhouse image editing via canvas web application

… what took half the day was the replacement of with this alternative response object return 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 …


const pickerOpts = {
types: [
{
description: "Images",
accept: {
"image/*": [".png", ".gif", ".jpeg", ".jpg"],
},
},
],
excludeAcceptAllOption: true,
multiple: false,
};

// create a reference for our file handle
let fileHandle;

async function getFile() {
// open file picker, destructure the one element returned array
[fileHandle] = await window.showOpenFilePicker(pickerOpts);

// run code with our fileHandle
const file = await fileHandle.getFile();
const content = await file.arrayBuffer(); //text();
const contents = _arrayBufferToBase64(content);
//alert('' + file.name + ' ... ' + (contents));
const canvaso=document.getElementById('canvas');
const context=canvaso.getContext('2d');


nimg=new Image();

nimg.onload = (event) => {
canvaso.width=event.target.width;
canvaso.height=event.target.height;
context.drawImage(event.target, 0, 0);
document.getElementById('cif').src='/HTMLCSS/user_of_signature_signature.html?rand=' + Math.floor(Math.random() * 1987867);
document.getElementById('cif').style.display='block';
};

nimg.src='data:image/' + file.name.split('.')[eval(-1 + file.name.split('.').length)].split('?')[0].split('#')[0].toLowerCase().replace('jpg','jpeg') + ';base64,' + ((((contents))));
}


… within today’s proof of concept Show Open File Picker Image Editing web application you can also try, alas only successfully on non-mobile platforms (with experimental functionality), below …

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.