<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>
<div id=divmybut style=display:inline-block;><button id=mybut title='Open Image ...' onclick="getFile();">Open Image ...</button></div>  <div id=divmypdfbut style=display:inline-block;><button id=mypdfbut title='Open PDF ...' onclick="getPDFFile();">Open PDF ...</button></div><br><br>
<script type=text/javascript>

var xhr=null, nimg=null, aconto=null, rectx=null, bconto=null, cconto=null;
var sofp=('' + typeof(window.showOpenFilePicker));

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

function checkpif(iois) {
if (iois != null) {
bconto = (iois.contentWindow || iois.contentDocument);
//alert(1);
if (bconto.document) { bconto = bconto.document; }
//alert(11);
if (bconto != null) {
//alert(111);
//alert('<sty' + 'le> input[type="file"]::after { content:' + "'Open PDF...'; } </sty" + 'le>');

setTimeout(function(){ bconto.getElementById('dimap').innerHTML+='<sty' + 'le> input[type="file"]::before { content:' + "'Open PDF...' !important; } </sty" + 'le>'; }, 4000);
//alert('<sty' + 'le> input[type="file"]::after { content:' + "'Open PDF...'; } </sty" + 'le>');
if (bconto.getElementById('files')) {
bconto.getElementById('files').onmousedown=function(event){ document.getElementById('divmypdfbut').style.width='700px'; document.getElementById('divmypdfbut').style.height='700px'; document.getElementById('ifmypdfbut').style.width='100%'; document.getElementById('ifmypdfbut').style.height='100%'; };
bconto.getElementById('files').ontouchdown=function(event){ document.getElementById('divmypdfbut').style.width='700px'; document.getElementById('divmypdfbut').style.height='700px'; document.getElementById('ifmypdfbut').style.width='100%'; document.getElementById('ifmypdfbut').style.height='100%'; };
}
}
}
}

function checkppif(iois) {
if (iois != null) {
cconto = (iois.contentWindow || iois.contentDocument);
//alert(1);
if (cconto.document) { cconto = cconto.document; }
//alert(11);
if (cconto != null) {
//alert(111);
//alert('<sty' + 'le> input[type="file"]::after { content:' + "'Open Image...'; } </sty" + 'le>');

setTimeout(function(){ cconto.getElementById('dimap').innerHTML+='<sty' + 'le> input[type="file"]::before { content:' + "'Open Image...' !important; } </sty" + 'le>'; }, 4000);
//alert('<sty' + 'le> input[type="file"]::after { content:' + "'Open Image...'; } </sty" + 'le>');
if (cconto.getElementById('files')) {
cconto.getElementById('files').onmousedown=function(event){ document.getElementById('divmybut').style.width='700px'; document.getElementById('divmybut').style.height='700px'; document.getElementById('ifmybut').style.width='100%'; document.getElementById('ifmybut').style.height='100%'; };
cconto.getElementById('files').ontouchdown=function(event){ document.getElementById('divmybut').style.width='700px'; document.getElementById('divmybut').style.height='700px'; document.getElementById('ifmybut').style.width='100%'; document.getElementById('ifmybut').style.height='100%'; };
}
}
}
}

</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>
<script type=text/javascript>
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'; };
}
</script>
</body>
</html>