<html>
<head>
<title>Using Open File Picker - RJM Programming - December, 2024 ... thanks to https://developer.mozilla.org/en-US/docs/Web/API/Window/showOpenFilePicker</title>
</head>
<body>
<h1>Using Open File Picker</h1>
<h3>RJM Programming - December, 2024</h3>
<h4>Thanks to <a target=_blank title='https://developer.mozilla.org/en-US/docs/Web/API/Window/showOpenFilePicker' href='//developer.mozilla.org/en-US/docs/Web/API/Window/showOpenFilePicker'>https://developer.mozilla.org/en-US/docs/Web/API/Window/showOpenFilePicker</a></h4>
<br>
<button id=mybut title='Open Image ...' onclick="getFile();">Open Image ...</button> <button id=mypdfbut title='Open PDF ...' onclick="getPDFFile();">Open PDF ...</button><br><br>
<script type=text/javascript>

var xhr=null, nimg=null, aconto=null;

function toBase64(inst) {
return inst;
}

function _arrayBufferToBase64( buffer ) {
var binary = '';
var bytes = new Uint8Array( buffer );
var len = bytes.byteLength;
for (var i = 0; i < len; i++) {
binary += String.fromCharCode( bytes[ i ] );
}
return window.btoa( binary );
}

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

const pickerPdfOpts = {
types: [
{
description: "PDF",
accept: {
"application/pdf": [".pdf"],
},
},
],
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');
document.getElementById('mybut').title='Open Image and Edit ' + file.name.replace(/\ /g, '_') + ' ...';

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';
};

//alert(toBase64(contents));
//var xx=prompt('data:image/' + file.name.split('.')[eval(-1 + file.name.split('.').length)].split('?')[0].split('#')[0].toLowerCase().replace('jpg','jpeg') + ';base64,' + (window.btoa(unescape(encodeURIComponent(contents)))), 'data:image/' + file.name.split('.')[eval(-1 + file.name.split('.').length)].split('?')[0].split('#')[0].toLowerCase().replace('jpg','jpeg') + ';base64,' + (window.btoa(unescape(encodeURIComponent(contents)))));
//document.getElementById('cimg').src='data:image/' + file.name.split('.')[eval(-1 + file.name.split('.').length)].split('?')[0].split('#')[0].toLowerCase().replace('jpg','jpeg') + ';base64,' + toBase64(contents); //'data:image/' + file.name.split('.')[eval(-1 + file.name.split('.').length)].split('?')[0].split('#')[0].toLowerCase().replace('jpg','jpeg') + ';base64,' + ((((contents))));
//nimg.src='data:image/' + file.name.split('.')[eval(-1 + file.name.split('.').length)].split('?')[0].split('#')[0].toLowerCase().replace('jpg','jpeg') + ';base64,' + (window.btoa(unescape(encodeURIComponent(contents))));
nimg.src='data:image/' + file.name.split('.')[eval(-1 + file.name.split('.').length)].split('?')[0].split('#')[0].toLowerCase().replace('jpg','jpeg') + ';base64,' + ((((contents))));
}

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

// run code with our fileHandle
const file = await fileHandle.getFile();
const content = await file.arrayBuffer(); //text();
const contents = _arrayBufferToBase64(content);
document.getElementById('pdfcont').value=contents;
document.getElementById('pdfname').value=file.name.replace(/\ /g, '_');

document.getElementById('mypdfbut').title='Open PDF and Extract ' + file.name.replace(/\ /g, '_') + ' ...';
document.getElementById('mypdfbut').innerHTML='Open PDF and Extract ' + file.name.replace(/\ /g, '_') + ' ...';
document.getElementById('cif').style.display='block';
document.getElementById('pdfsub').click();
}

function checkif(iois) {
if (iois.src.indexOf('?') != -1 && iois.src.indexOf('php_calls_pdfimages.php') == -1) {
aconto = (iois.contentWindow || iois.contentDocument);
if (aconto != null) {
if (aconto.document) { aconto = aconto.document; }
if (aconto.body != null) {
setTimeout(function(){
document.getElementById('canvas').style.display='none';
aconto.getElementById('topcanvas').width=nimg.width;
aconto.getElementById('topcanvas').height=nimg.height;
aconto.getElementsByTagName('tr')[0].style.width='' + eval(2 * eval('' + nimg.width)) + 'px';
aconto.getElementById('lefttd').style.width='' + eval(10 + eval('' + nimg.width)) + 'px';
aconto.getElementById('toptd').style.left='' + eval(10 + eval('' + nimg.width)) + 'px';
aconto.getElementById('topcanvas').getContext('2d').drawImage(nimg, 0, 0);
if (('' + document.getElementById('mybut').title).indexOf(' and Edit') != -1) {
document.getElementById('mybut').innerHTML=document.getElementById('mybut').title;
} else {
document.getElementById('mybut').innerHTML='Open Image and Edit ...';
}
}, 3800);
}
}
}
}

</script>
<canvas id=canvas></canvas>
<iframe onload=checkif(this); name=cif id=cif src='/HTMLCSS/user_of_signature_signature.html' style=width:100%;height:900px;display:none;></iframe>
<form target=cif action=/php_calls_pdfimages.php method=POST style=display:none;>
<input type=hidden id=pdfcont name=pdfcont value=''></input>
<input type=hidden id=pdfname name=pdfname value=''></input>
<input type=submit style=display:none; value=Submit id=pdfsub></input>
</form>
</body>
</html>