Introduzione alla File System Access API in Javascript

La vuova File System Access API ci consente di accedere al filesystem locale tramite Javascript direttamente da browser.

Oggi ne vediamo un esempio molto veloce, in quanto l'API non è ancora compatibile con tutti i browsers.

Ad esempio funziona in Chrome ma non in Firefox.

Qui sotto un esempio di codice per aprire un file:

async function btnClick() {

	let fileHandle;

	[fileHandle] = await window.showOpenFilePicker();

	const file = await fileHandle.getFile();
	const content = await file.text();

	console.log(file);
	console.log(content);
}

Abbiamo usato il metodo showOpenFilePicker.

Volendo possiamo impostare delle opzioni, come ad esempio permettere l'apertura solo di immagini:

async function btnClick() {

	let fileHandle;

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

	[fileHandle] = await window.showOpenFilePicker(opts);

	const file = await fileHandle.getFile();
	const content = await file.text();

	console.log(file);
	console.log(content);
}

Ricordatevi di provarlo in Chrome o browser compatibili, e che il tutto deve stare su un server con HTTPS.

Enjoy!