De File System Access API: vereenvoudigt de toegang tot lokale bestanden

De File System Access API stelt webapps in staat om rechtstreeks bestanden en mappen op het apparaat van de gebruiker te lezen of wijzigingen daarin op te slaan.

Pete LePage

Thomas Steiner

Gepubliceerd: 19 augustus 2024

De File System Access API stelt ontwikkelaars in staat krachtige webapplicaties te bouwen die interactie hebben met bestanden op het lokale apparaat van de gebruiker, zoals IDE's, foto- en videobewerkingsprogramma's, tekstverwerkers en meer. Nadat een gebruiker een webapplicatie toegang heeft verleend, stelt deze API de gebruiker in staat om rechtstreeks bestanden en mappen op het apparaat van de gebruiker te lezen of wijzigingen daarin op te slaan. Naast het lezen en schrijven van bestanden biedt de File System Access API ook de mogelijkheid om een ​​map te openen en de inhoud ervan te bekijken.

Als je al eerder met het lezen en schrijven van bestanden hebt gewerkt, zal veel van wat ik ga delen je bekend voorkomen. Ik raad je echter aan het toch te lezen, want niet alle systemen zijn hetzelfde.

De File System Access API wordt ondersteund door de meeste Chromium-browsers op Windows, macOS, ChromeOS, Linux en Android. Een opvallende uitzondering is Brave, waar deze momenteel alleen beschikbaar is achter een vlag .

Gebruikmaken van de File System Access API

Om de kracht en het nut van de File System Access API te demonstreren, heb ik een eenvoudige teksteditor geschreven. Hiermee kun je een tekstbestand openen, bewerken, de wijzigingen opslaan op de schijf of een nieuw bestand starten en de wijzigingen daarvan opslaan. Het is niets bijzonders, maar biedt voldoende functionaliteit om de concepten te begrijpen.

Browserondersteuning

Kenmerkdetectie

Om te achterhalen of de File System Access API wordt ondersteund, controleer dan of de picker-methode waarin u geïnteresseerd bent, bestaat.

if ('showOpenFilePicker' in self) {
  // The `showOpenFilePicker()` method of the File System Access API is supported.
}

Probeer het eens.

Bekijk de File System Access API in actie in de demo van de teksteditor .

Een bestand lezen uit het lokale bestandssysteem.

De eerste use case die ik wil behandelen, is de gebruiker vragen een bestand te kiezen, dat vervolgens te openen en van de schijf te lezen.

Vraag de gebruiker om een ​​bestand te kiezen om te lezen.

Het toegangspunt tot de File System Access API is window.showOpenFilePicker() . Wanneer deze functie wordt aangeroepen, verschijnt een dialoogvenster voor het selecteren van bestanden, waarin de gebruiker wordt gevraagd een bestand te selecteren. Nadat een bestand is geselecteerd, retourneert de API een array met bestandshandles. Een optionele parameter options ' stelt u in staat het gedrag van de bestandsselector te beïnvloeden, bijvoorbeeld door de gebruiker meerdere bestanden, mappen of verschillende bestandstypen te laten selecteren. Zonder opties kan de gebruiker slechts één bestand selecteren. Dit is ideaal voor een teksteditor.

Net als veel andere krachtige API's moet het aanroepen van showOpenFilePicker() in een beveiligde context gebeuren en moet het vanuit een gebruikersgebaar worden aangeroepen.

let fileHandle;
butOpenFile.addEventListener('click', async () => {
  // Destructure the one-element array.
  [fileHandle] = await window.showOpenFilePicker();
  // Do something with the file handle.
});

Zodra de gebruiker een bestand selecteert, retourneert showOpenFilePicker() een array met handles, in dit geval een array met één element, namelijk één FileSystemFileHandle die de eigenschappen en methoden bevat die nodig zijn om met het bestand te interageren.

Het is handig om een ​​verwijzing naar de bestandsdescriptor te bewaren, zodat u deze later kunt gebruiken. U hebt deze nodig om wijzigingen in het bestand op te slaan of om andere bestandsbewerkingen uit te voeren.

Een bestand lezen uit het bestandssysteem

Nu je een handle naar een bestand hebt, kun je de eigenschappen van het bestand opvragen of het bestand zelf benaderen. Voorlopig lees ik de inhoud ervan. Door handle.getFile() aan te roepen, krijg je een File object terug, dat een blob bevat. Om de gegevens uit de blob te halen, roep je een van de methoden ervan aan ( slice() , stream() , text() of arrayBuffer() ).

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

Het File object dat wordt geretourneerd door FileSystemFileHandle.getFile() is alleen leesbaar zolang het onderliggende bestand op de schijf niet is gewijzigd. Als het bestand op de schijf wordt gewijzigd, wordt het File object onleesbaar en moet u getFile() opnieuw aanroepen om een ​​nieuw File object te verkrijgen waarmee u de gewijzigde gegevens kunt lezen.

Alles bij elkaar brengen