Hoe open je lokale bestanden in de browser met file:///?

Het is mogelijk om de browser te gebruiken als een kleine bestandsverkenner, en als je dat op de juiste manier doet, kan dat enorm handig zijn. Van het openen van een eenvoudig lokaal document met file:/// tot het werken met de krachtige File System Access API.Moderne browsers bieden tegenwoordig veel meer mogelijkheden dan we gewoonlijk gebruiken.

In deze gids zullen we stap voor stap zien, hoe lokale bestanden te openen in de webbrowser file:/// gebruiken in Chrome, Edge en FirefoxHoe je je browser op Windows en Android kunt omtoveren tot een eenvoudige bestandsverkenner, en hoe ontwikkelaars nog een stap verder kunnen gaan door de File System Access API te gebruiken om lokale bestanden en mappen te lezen, schrijven en beheren vanuit een webapplicatie.

Wat betekent het nu eigenlijk om lokale bestanden te openen met file:///?

Wanneer je een route schrijft die begint met file:/// in de adresbalk van de browser, Je geeft de browser de opdracht om toegang te krijgen tot het lokale bestandssysteem in plaats van tot het internet.Dat wil zeggen, iets openen dat zich op je eigen apparaat bevindt: een harde schijf, intern geheugen of een SD-kaart.

Dit speciale URL-schema (file:///) Het werkt vergelijkbaar met het typen van C: in Windows of / in Linux en macOSHet is gewoon aangepast aan de logica van de browser. Wat je vervolgens ziet, is een soort lijst met mappen en bestanden, zonder poespas: namen, groottes, wijzigingsdatum en weinig meer.

Daar moet natuurlijk rekening mee worden gehouden Browsers behandelen deze lokale routes met veel beveiligingsbeperkingen.Een website die u bijvoorbeeld bezoekt via internet, kan niet zomaar uw lokale bestanden lezen, alleen maar omdat u een URL opent met file:///Een expliciete handeling of toestemming van de gebruiker is altijd vereist.

De browser gebruiken als bestandsverkenner op Android

Veel Android-telefoons worden niet geleverd met een degelijke bestandsbeheerder van de fabrikant, of de vooraf geïnstalleerde is nogal beperkt. In die gevallen, Het gebruik van Chrome, Edge of een andere op Chromium gebaseerde browser als noodoplossing kan je uit de problemen helpen..

De truc is heel simpel: Open je op Chromium gebaseerde browser (Chrome, Edge, Brave, enz.) en typ het volgende in de adresbalk: bestand: /// sd-kaart /Android identificeert de opslagruimte belangrijkste interne als sdcardOp een vergelijkbare manier als hoe Windows de C:-schijf gebruikt als hoofdschijf.

Wanneer je dat adres opent, vraagt ​​de browser meestal om toestemming om de interne opslag te lezen. Zodra je die toestemming verleent, verschijnt er een index met de hoofdmappen van je interne geheugen.Van daaruit kunt u mappen openen en sluiten alsof u een website met links bezoekt.

In elke map vindt u zowel submappen als bestanden. De bestanden worden weergegeven met hun volledige naam, inclusief de extensie, hun grootte en de datum van de laatste wijziging.De volgende items worden ook vermeld: verborgen mappen, die in Android meestal met een punt beginnen, zoals .nomedia of andere soortgelijke.

Hoewel de lijst zeer beknopt is, De meeste moderne browsers kunnen veel soorten bestanden direct openen door erop te tikken.Afbeeldingen, video's, audio, tekstdocumenten, enz. Er zijn geen miniaturen of voorbeelden, maar door simpelweg op de bestandsnaam te klikken, probeert de browser het bestand weer te geven of af te spelen.

Verander Chrome en Edge in een kleine bestandsverkenner op je pc.

Op desktopcomputers, zowel met Windows als met andere systemen, Je kunt ook Chrome, Edge en andere op Chromium gebaseerde browsers gebruiken om door je lokale schijven te navigeren met file:///.Het principe is hetzelfde als bij Android, maar de aanpak is anders.

Als je Windows gebruikt, is de primaire schijf meestal C:. In dat geval, typ in de adresbalk bestand:///C: en druk op EnterDe browser toont u de inhoud van de hoofdmap van die schijf: mappen zoals Windows, Program Files, Usuarios, Etc.

Als u meerdere schijven of partities hebt, Je kunt de letter in de URL vervangen door de overeenkomstige letter.. Bijvoorbeeld file:///D: voor een ander album of file:///E: voor een herinnering USB dat het met die brief was gemonteerd. Klik vervolgens op de mappen om verder te gaan en gebruik de terugknop van de browser om terug te keren.

Net zoals op Android, In elke map ziet u bestanden en submappen met de grootte, de wijzigingsdatum en de extensie.Het genereert geen miniaturen of mooie pictogrammen, maar het is voldoende om een ​​specifiek bestand te vinden of snel een overzicht van de mapstructuur te krijgen.

De meeste Chromium-browsers Ze stellen je in staat om direct multimediabestanden en zelfs bepaalde documentformaten te openen. Door er simpelweg op te klikken. Afbeeldingen, video's, audio of platte tekstbestanden worden heel natuurlijk in het tabblad weergegeven.

Open lokale bestanden in Chrome en Firefox zonder handmatig file:/// te hoeven typen.

Naast het typen van routes met file:///Browsers bevatten snelkoppelingen die speciaal zijn ontworpen om lokale bestanden snel te openen. In Chrome kun je bijvoorbeeld de toetsencombinatie Ctrl + O gebruiken. (Control + O) wanneer het browservenster actief is.

Door op die sneltoets te drukken, Het standaard dialoogvenster "Bestand openen" van het besturingssysteem wordt geopend.Zoek het gewenste bestand, selecteer het en bevestig. Chrome laadt het vervolgens in het huidige tabblad of in een nieuw tabblad, afhankelijk van het bestandstype en uw voorkeuren.

Firefox biedt verschillende opties. Enerzijds, Je kunt naar het hoofdmenu gaan en de optie "Bestand openen..." kiezen.Dit doet precies hetzelfde: het toont het venster voor bestandsselectie van het systeem. Als alternatief kunt u een pad zoals dit rechtstreeks in de adresbalk typen: file:///// zodat de browser in Windows begint met het weergeven van de inhoud van schijf C:.

Met elk van deze methoden, Het praktische resultaat is dat de browser een lokale bestandsviewer wordt.Het kan je helpen wanneer de Windows Explorer Het programma loopt vast wanneer er problemen zijn met de gebruikelijke bestandsbeheerder of simpelweg wanneer je een documenttype wilt openen dat de browser normaal gesproken bijzonder goed verwerkt.

De File System Access API: de sprong van kijker naar editor

Alles wat we tot nu toe hebben gezien, is gebaseerd op het "handmatige" gebruik van file:/// en de dialoogvensters voor het openen van bestanden, oftewel dingen die de gebruiker handmatig doet. Maar Chromium-gebaseerde browsers hebben de File System Access API al enige tijd in hun software geïntegreerd.waardoor webapplicaties op een veel geavanceerdere manier met lokale bestanden kunnen werken.

Deze API stelt een website in staat om, na uw toestemming te hebben gevraagd, Lees en sla wijzigingen rechtstreeks op in bestanden en mappen op uw apparaat.Dankzij deze functie kunnen volwaardige tekstverwerkers en IDE's rechtstreeks vanuit de browser worden ontwikkeld. programmeringFoto- en video-editors, projectmanagers en vele andere tools die voorheen alleen zinvol waren om als desktopapplicaties te ontwikkelen.

Het is belangrijk om deze moderne API niet te verwarren met oudere of verouderde API's. Het is niet hetzelfde als de interface. FileSystem noch de File and Directory Entries API, noch de oude "File API: Directories and System"-specificatie., die andere mechanismen voorstelden voor het beheren van bestandshiërarchieën en sandbox-opslaggebieden.

De huidige API voor toegang tot het bestandssysteem Het is met bijzondere aandacht ontworpen op het gebied van beveiliging, toegangsrechten en gebruikerservaring.Het vereist altijd expliciete handelingen (zoals het klikken op een knop) om de bestands- of mapkiezer te openen, en de gebruiker weet altijd precies tot welke paden hij of zij toegang verleent.

Wat betreft compatibiliteit, De API werkt in de meeste op Chromium gebaseerde browsers op Windows, macOS, Linux, ChromeOS en Android.Een opvallende uitzondering is Brave, waar het nog steeds nodig is om een ​​vlag te activeren om het te kunnen gebruiken. Andere browsers die niet op Chromium gebaseerd zijn, implementeren het mogelijk niet of slechts gedeeltelijk.

Controleer of de browser de File System Access API ondersteunt.

Als ontwikkelaar is het eerste wat je wilt weten of de browser van de gebruiker deze API ondersteunt voordat je hem probeert te gebruiken. De eenvoudigste manier is om te controleren of de overeenkomstige methoden voor bestandsselectie in het globale object aanwezig zijn.bijvoorbeeld door te controleren of showOpenFilePicker is beschikbaar in window (o self (in een werknemer).

Het typische patroon ziet er ongeveer zo uit: “Als 'showOpenFilePicker' is ingesteld op self, kan ik de API gebruiken; anders moet ik een alternatieve methode gebruiken.”Dit maakt de implementatie van hybride oplossingen mogelijk, waarbij, indien er ondersteuning is, de voordelen van de API worden benut en, indien er geen ondersteuning is, traditionele technieken zoals bestandsuploadformulieren worden gebruikt.

Het is ook een goed idee Testen op de beoogde browsers en op verschillende besturingssystemenHoewel de basis Chromium is, kunnen sommige fabrikanten specifieke functies in- of uitschakelen omwille van beveiliging, beleid of prestatieoverwegingen.

Eerste voorbeeld: een lokaal bestand openen vanuit een webapplicatie.

Een van de meest gangbare voorbeelden om deze API te begrijpen, is het bouwen van een Een teksteditor voor één bestand waarmee u een document kunt openen, bewerken en opslaan.Het hoeft niet spectaculair te zijn: zolang het platte tekst kan lezen en schrijven, laat het al zien hoe het werkt.

Het uitgangspunt hier is de methode. window.showOpenFilePicker(). Deze methode kan alleen worden aangeroepen in een beveiligde context (HTTPS) en als reactie op een gebruikersgebaar.Het toont een standaard dialoogvenster waarin de gebruiker een bestand kan kiezen. Na selectie retourneert het een array met handles, meestal met één enkele handle. FileSystemFileHandle.

Die handle bevat alle informatie en methoden die nodig zijn om met het gekozen bestand te werken. Het is verstandig om een ​​verwijzing naar de handle op te slaan, want die heb je later nodig om het bestand te lezen, wijzigingen op te slaan of andere bewerkingen uit te voeren.Zolang je die handle behoudt en de gebruiker de machtigingen niet heeft ingetrokken, kan je app met het bestand communiceren.

Zodra je het FileSystemFileHandle, Je kunt het object verkrijgen. File echte roeping handle.getFile()Dit object File Het bevat de gegevens van het bestand als een blob, en je kunt de inhoud ervan benaderen met behulp van methoden zoals... text(), arrayBuffer(), stream() o slice() als je willekeurige toegang nodig hebt.

In de praktijk geldt voor een eenvoudige teksteditor het volgende: Het is gebruikelijk om te gebruiken file.text() om de volledige inhoud als een tekenreeks te verkrijgenen plaats die tekst in een <textarea> zodat de gebruiker het kan bewerken. Het is belangrijk om op te merken dat het object File De geldigheid vervalt als het bestand op de schijf op een andere manier wordt gewijzigd; in dat geval is het raadzaam de procedure opnieuw uit te voeren. getFile().

Wijzigingen opslaan: schrijf naar het lokale bestandssysteem.

Om de door de gebruiker aangebrachte wijzigingen op te slaan, biedt de API twee gebruikelijke manieren: een "eenvoudige" opslagoptie die het originele bestand overschrijft en een "Opslaan als"-optie die een nieuw bestand aanmaaktHet fundamentele verschil is of je al een verwijzing naar het bestemmingsbestand hebt, of dat de gebruiker een nieuw pad en een nieuwe naam moet kiezen.

Wanneer je een nieuw bestand wilt maken of een kopie wilt opslaan met een andere naam, je zou ... moeten gebruiken showSaveFilePicker()Deze methode opent de bestandsselector in de opgeslagen modus, waardoor de gebruiker de naam, map en extensie kan opgeven. U kunt opties toevoegen om bestandstypen voor te stellen, bijvoorbeeld door aan te geven dat het een tekstbestand is en dat de gewenste extensie .xml is. .txt.

Een belangrijk detail is dat U moet bellen showSaveFilePicker() direct als reactie op het gebaar van de gebruiker (bijvoorbeeld door op de knop "Opslaan" te klikken) en wacht hier niet mee terwijl je zware processen uitvoert. Als je al het voorbereidende werk hebt gedaan en vervolgens met een vertraging probeert het dialoogvenster te openen, kan de browser een beveiligingsfout geven omdat deze niet langer rekening houdt met een "gebruikersactie".

Zodra je een FileSystemFileHandle wijzend naar het bestand waarin u wilt opslaan, De volgende stap is het creëren van een FileSystemWritableFileStream gebruik fileHandle.createWritable()Deze stream gebruik je om de data te schrijven. Als de browser detecteert dat je nog geen schrijfrechten hebt, verschijnt er een dialoogvenster met toestemmingsverzoeken; als de gebruiker deze weigert, wordt er een uitzondering gegenereerd.

Met de beek in de hand, U hoeft alleen maar te bellen. writable.write(contenido) met een tekenreeks, een Blob of een BufferSourceJe kunt zelfs de inhoud van een HTTP-antwoord rechtstreeks naar de stream doorsturen met response.body.pipeTo(writable)Als je klaar bent met typen, sluit je het gesprek af met writable.close()Dat is het moment waarop de wijzigingen op de schijf worden opgeslagen.

Zolang de stream open is, kunt u ook methoden gebruiken zoals seek() o truncate() voor De schrijfwijzer naar een specifieke positie verplaatsen of de bestandsgrootte wijzigenHet is echter belangrijk om te onthouden dat de wijzigingen pas definitief worden doorgevoerd wanneer de stream wordt gesloten.

Suggesties voor bestandsnaam en thuismap aan de gebruiker

De API zorgt ook voor de gebruikerservaring in systeemdialoogvensters. Bijvoorbeeld: U kunt een voorgestelde bestandsnaam opgeven wanneer u de functie aanroept. showSaveFilePicker()Hierdoor kan de gebruiker iets meer beschrijvends zien, zoals "Nieuw document.txt", in plaats van een algemene "Geen titel".

Evenzo Het is mogelijk om een ​​startmap voor te stellen waar de bestandsselector begint.Dit gebeurt door een eigenschap door te geven. startIn wanneer u belt showSaveFilePicker(), showOpenFilePicker() o showDirectoryPicker()De waarden kunnen tekenreeksen zijn, zoals desktop, documents, downloads, music, pictures o videos, die overeenkomen met standaard systeemlocaties.

Ook heb je de mogelijkheid om gebruiken als waarde van startIn een bestands- of mapbeheerder die je al hebtIn dat geval wordt het dialoogvenster direct geopend in de map waar die handle zich bevindt, wat erg handig is om de werkcontext van de vorige sessie te hervatten.

Als uw applicatie verschillende bestandstypen verwerkt (bijvoorbeeld tekstdocumenten en ingesloten afbeeldingen), U kunt verschillende ID's definiëren voor elk type dialoogvenster.Op deze manier onthoudt de browser de laatst gebruikte map onafhankelijk voor elke ID, en raakt u documentpaden niet verwisseld met afbeeldingspaden.

Onthoud recente bestanden en mappen met IndexedDB.

Een van de sterke punten van File System Access is dat de handlers ervan serialiseerbaar zijn. Dit betekent dat u kunt opslaan FileSystemFileHandle y FileSystemDirectoryHandle in IndexedDB en ze in volgende sessies weer ophalen, waarbij altijd het toegangsbeleid in acht wordt genomen.

Dankzij dit kunnen webapplicaties typische desktopfunctionaliteiten bieden, zoals: lijsten met recent geopende bestanden, het opnieuw openen van het laatste project of het herstellen van de vorige werkmapJe hoeft alleen de handles in de database van de browser op te slaan en ze uit te lezen wanneer de app start.

Wanneer u een opgeslagen handle ophaalt, Ga er niet van uit dat de vergunningen van kracht blijven.De browser kan besluiten dat er opnieuw om autorisatie moet worden gevraagd, bijvoorbeeld omdat er tijd is verstreken of het laatste tabblad van die bron is gesloten. Daarom is het aan te raden dat uw code hierop controleert.

Voor deze controle, De API bevat de volgende methoden. queryPermission() y requestPermission() zowel in bestands- als maphandlersEerst vraag je naar de status van de machtiging. Als deze niet is "verleend", kun je deze opnieuw aanvragen bij de gebruiker, waarbij je in de opties aangeeft of je alleen leesrechten of lees- en schrijfrechten nodig hebt.

Een goede gewoonte is combineer beide stappen in één helpfunctie Gegeven een handle en een modus (alleen-lezen of lezen/schrijven), moet het controleren of de toestemming al is verleend en, zo niet, de bijbehorende prompt weergeven. Dit vermindert het aantal dialoogvensters en zorgt voor een soepelere gebruikerservaring.

Open en blader door complete mappen vanuit de browser.

Naast individuele bestanden biedt de API ook de mogelijkheid om met complete mappen te werken. met showDirectoryPicker() De gebruiker kan een volledige map selecteren.en de aanvraag ontvangt een FileSystemDirectoryHandle waardoor toegang wordt verkregen tot al zijn elementen.

Standaard heb je leesrechten voor de bestanden in die map, maar als je er ook naar wilt schrijven, moet je dat ook hebben. U kunt lees- en schrijftoegang aanvragen door het volgende door te geven: { mode: 'readwrite' } bij het bellen showDirectoryPicker()Vanaf dat moment kan uw app de inhoud weergeven en bewerken op basis van de verleende toestemming.

Om door de map te navigeren, Je kunt asynchroon itereren over dirHandle.values()die één voor één de elementen retourneert die het bevat: bestanden en submappen. Elk item heeft een eigenschap. kind wat aangeeft of het een "file" of "directory".

Als u informatie over elk bestand wilt opvragen, zoals de grootte ervan, kunt u de volgende opdracht uitvoeren: entry.getFile(). In deze gevallen wordt aanbevolen de metingen parallel uit te voeren met behulp van Promise.all() of vergelijkbare techniekenin plaats van ze één voor één in een strikt opeenvolgende volgorde te doen, wat langzamer kan zijn.

Je kunt dit ook vanuit een map doen. nieuwe mappen of bestanden maken met getDirectoryHandle() y getFileHandle()Je kunt in de opties aangeven of je ze wilt aanmaken als ze nog niet bestaan. Je kunt bijvoorbeeld rechtstreeks vanuit de webapplicatie een projectstructuur instellen zoals "Mijn project / Code / Notes.txt".

Bestanden beheren: verwijderen, hernoemen en verplaatsen

De API is niet beperkt tot lezen en schrijven. Het biedt je ook de mogelijkheid om bestanden en mappen uit een directory te verwijderen met behulp van removeEntry() op een FileSystemDirectoryHandleAls het een map betreft, kunt u de verwijdering recursief maken, zodat alle submappen en bestanden daarin worden meegenomen.

Als u liever niet via de mapstructuur werkt, maar direct een actie wilt uitvoeren op een bestands- of maphandle, Sommige browsers bieden deze methode aan. remove() en FileSystemFileHandle y FileSystemDirectoryHandleOp deze manier verwijder je dat element zonder dat je de naam ervan in de bovenliggende map hoeft te vermelden.

Voor organisatorische bewerkingen zoals het hernoemen of verplaatsen van items naar een andere map, Er bestaat een methode move() in de interface FileSystemHandleJe kunt direct een nieuwe naam, een bestemmingsmap of een map plus de nieuwe naam opgeven om tegelijkertijd te verplaatsen en te hernoemen.

Er zijn echter wel nuances als het om compatibiliteit gaat: de steun van move() Het is volwassener voor bestanden binnen het bronbestandssysteem (OPFS).en mogelijk nog steeds achter vlaggen verborgen zitten of niet voor alle scenario's of voor mappen in bepaalde browsers zijn geïmplementeerd.

Sleep bestanden en mappen naar het web.

De File System Access API integreert erg goed met het drag-and-drop-systeem van HTML. Wanneer de gebruiker bestanden of mappen vanuit het besturingssysteem naar een webpagina sleept.De browser creëert elementen. DataTransferItem medewerkers.

Via de methode DataTransferItem.getAsFileSystemHandle(), je kunt een FileSystemFileHandle of het element een bestand is of een FileSystemDirectoryHandle als het een map isEen app kan de gebruiker dus de mogelijkheid bieden om een ​​complete map met foto's te slepen en neer te zetten, en vervolgens direct met de inhoud ervan te werken.

Houd er rekening mee dat, in de context van slepen en neerzetten, DataTransferItem.kind Het zal altijd "bestand" zijn voor zowel bestanden als mappen.Het verschil tussen een bestand en een map kunt u achterhalen door de eigenschappen te raadplegen. kind del FileSystemHandle dat geeft je terug getAsFileSystemHandle()die onderscheid zal maken tussen "file" y "directory".

Private Source File System (OPFS) en geoptimaliseerde toegang

Naast toegang tot de bestanden en mappen van de gebruiker bieden Chromium-browsers ook een origineel privébestandssysteem (OPFS)Dit is een opslagruimte die specifiek is toegewezen aan elke website en die niet rechtstreeks toegankelijk is voor de gebruiker vanuit het besturingssysteem.

In de praktijk betekent dit dat Hoewel de browser deze gegevens intern op de schijf opslaat, zal de gebruiker ze niet als "normale" bestanden in een willekeurige map terugvinden.Dit kan een database zijn, gecomprimeerde bestanden of elke andere interne structuur die de browser geschikt acht.

Via de API heb je toegang tot de root van dit privésysteem. navigator.storage.getDirectory(), wat een retourneert FileSystemDirectoryHandle. Van daaruit kunt u bestanden en mappen aanmaken, lezen, erin schrijven, ze hernoemen of verwijderen, net alsof het onderdelen van het lokale bestandssysteem zijn.Maar wetende dat ze geïsoleerd zijn en uitsluitend bestemd voor uw webapplicatie.

Voor hogere prestatie-eisen, Chromium maakt gebruik van een speciaal bestandstype met geoptimaliseerde synchrone toegang.. Door fileHandle.createSyncAccessHandle() (beschikbaar in workers) kunt u een handle verkrijgen die synchroon en exclusief lezen en schrijven mogelijk maakt, wat handig is voor zeer intensieve of latencygevoelige gebruikssituaties.

Het verkrijgen van de handle is nog steeds asynchroon, maar zodra je die hebt, Lees- en schrijfbewerkingen worden uitgevoerd als directe aanroepen, waarbij bytebuffers worden gemanipuleerd.Dit benadert de prestaties van een native applicatie zeer dicht, maar dan zonder de webomgeving te verlaten en met behoud van isolatie ten opzichte van het private bronsysteem.

Polyfills en alternatieven wanneer er geen native ondersteuning is.

Hoewel de File System Access API veel mogelijkheden biedt, Nog niet alle browsers ondersteunen het.Het is niet mogelijk om een ​​complete polyfill te maken die alle mogelijkheden ervan nabootst, voornamelijk omdat er geen betrouwbare manier is om native bestandssysteemtoegang te simuleren zonder de medewerking van de browser zelf.

Sommige onderdelen kunnen echter bij benadering worden bepaald. Om na te bootsen showOpenFilePicker() een eenvoudige <input type="file">, waardoor het selectievakje voor bestanden wordt weergegeven en de gebruiker een of meer bestanden kan kiezen.

Iets soortgelijks gebeurt met opslaan. Imiteren showSaveFilePicker() een link wordt vaak gebruikt <a download="nombre"> Door erop te klikken, wordt een Blob gedownload die is gegenereerd met JavaScript. Hiermee kunt u gegevens die door de website zijn gegenereerd "opslaan", hoewel het niet de mogelijkheid biedt om bestaande bestanden te overschrijven.

Wat betreft het selecteren van complete mappen, Het niet-standaard kenmerk is traditioneel gebruikt webkitdirectory en <input type="file">waarmee je een map kunt kiezen en een lijst kunt ontvangen van de bestanden die erin staan. Het is geen universele oplossing en ook niet zo krachtig als showDirectoryPicker()maar het dekt wel een aantal gevallen.

Om deze benaderingen te verenigen, Er zijn boekhandels zoals browser-fs-access Ze proberen de moderne API te gebruiken wanneer die beschikbaar is, en zo niet, dan schakelen ze automatisch over op deze betere alternatieven.Op deze manier schrijft de ontwikkelaar relatief uniforme code en zorgt de bibliotheek ervoor dat deze zich aan de omgeving aanpast.

Beveiliging, machtigingen en gebruikerscontrole

Al deze macht brengt verantwoordelijkheden met zich mee, en browserteams zijn zich daar terdege van bewust. Het ontwerp van de File System Access API is gebaseerd op twee principes: gebruikerscontrole en transparantie.Het is onmogelijk dat een website stiekem de helft van een harde schijf kan uitlezen.

Wanneer de gebruiker een bestand opent met behulp van de selectievakjes (om het te lezen of om een ​​nieuw bestand op te slaan), Het is dat gebaar waarmee lees- of schrijfrechten voor het specifieke bestand of de specifieke map worden verleend.Als de gebruiker van gedachten verandert en het gesprek annuleert, ontvangt de website niets en krijgt dus geen toegang.

Om een ​​nieuw bestand op te slaan, klikt u op het vakje 'Opslaan'. Het geeft je niet alleen de mogelijkheid om een ​​naam en pad te kiezen, maar dient ook als schrijftoegang tot het nieuw aangemaakte bestand.De logica is dezelfde als die al jaren wordt gebruikt in elementen zoals <input type="file">maar uitgebreid met meer mogelijkheden.

Wanneer een webapplicatie een bestaand bestand wil wijzigen, Dat kan niet zomaar; de browser kan een specifieke melding weergeven waarin om toestemming wordt gevraagd om ernaar te schrijven.Dit dialoogvenster kan alleen worden geopend als reactie op een gebruikersactie, zoals het indrukken van een knop 'Wijzigingen opslaan'.

Als de gebruiker besluit die schrijfrechten niet te verlenen, De website moet een alternatief bieden: een kopie downloaden, opslaan in de cloud, werken in OPFS, of een ander vergelijkbaar mechanisme.Het idee is dat de gebruiker altijd het laatste woord heeft over wat er op zijn of haar lokale systeem wordt aangepast.

Wat betreft transparantie, Browsers tonen een pictogram in de adresbalk wanneer een website toegang heeft tot lokale bestanden.Als de gebruiker op dat pictogram klikt, krijgt hij een lijst te zien met de bestanden of mappen waartoe de pagina op dat moment toegang heeft en kan hij de machtigingen op elk gewenst moment intrekken.

Vergunningen zijn niet permanent. Over het algemeen behoudt een pagina de mogelijkheid om bestanden op te slaan zolang er ten minste één tabblad van die bron is geopend.Zodra al deze bestanden en mappen gesloten zijn, kan de browser de sessie als beëindigd beschouwen en zal het bij het volgende gebruik nodig zijn om opnieuw toestemming te vragen voor die bestanden of mappen.

Door het file:/// schema te combineren om specifieke bronnen te openen, sneltoetsen voor het uploaden van lokale bestanden en de File System Access API voor diepgaande integraties. Hierdoor wordt de browser een veelzijdiger hulpmiddel voor zowel gebruikers als ontwikkelaars.Hiermee kunt u snel een video bekijken die op de schijf is opgeslagen of complete projecten bewerken zonder de webomgeving te verlaten.