Open File Picker Javascript Primer Tutorial

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.