Jak otwierać pliki lokalne w przeglądarce za pomocą file:///

Możliwe jest używanie przeglądarki tak, jakby była małym eksploratorem plików. Jeśli używa się jej prawidłowo, może być ona niezwykle użyteczna. Od otwierania prostego dokumentu lokalnego za pomocą file:/// do pracy z potężnym interfejsem API dostępu do systemu plikówNowoczesne przeglądarki oferują obecnie o wiele więcej możliwości, niż zazwyczaj wykorzystujemy.

W tym przewodniku krok po kroku pokażemy, jak otwierać pliki lokalne w przeglądarka internetowa używanie file:/// w Chrome, Edge i FirefoxJak przekształcić przeglądarkę w podstawowy eksplorator plików w systemie Windows i Android oraz w jaki sposób deweloperzy mogą pójść o krok dalej, używając interfejsu API dostępu do systemu plików, aby odczytywać, zapisywać i zarządzać lokalnymi plikami i folderami z poziomu aplikacji internetowej.

Co tak naprawdę oznacza otwieranie plików lokalnych za pomocą file:///

Kiedy piszesz trasę zaczynającą się od file:/// w pasku adresu przeglądarki, Informujesz przeglądarkę, aby uzyskała dostęp do lokalnego systemu plików zamiast do Internetu.Chodzi o to, aby otworzyć coś, co znajduje się na twoim urządzeniu: dysku twardym, pamięci wewnętrznej lub karcie SD.

Ten specjalny schemat adresu URL (file:///) Działa podobnie jak wpisanie C: w systemie Windows lub / w Linux i macOSJest po prostu dostosowany do logiki przeglądarki. Zobaczysz wtedy coś w rodzaju listy folderów i plików, bez żadnych zbędnych dodatków: nazw, rozmiarów, dat modyfikacji i niczego więcej.

Oczywiście należy o tym pamiętać Przeglądarki stosują wiele ograniczeń bezpieczeństwa w przypadku tras lokalnych.Na przykład witryna internetowa, którą odwiedzasz z Internetu, domyślnie nie może swobodnie odczytywać Twoich lokalnych plików tylko dlatego, że otworzysz adres URL z file:///Zawsze wymagany jest wyraźny gest lub zgoda użytkownika.

Korzystanie z przeglądarki jako eksploratora plików w systemie Android

Wiele telefonów z Androidem nie zawiera porządnego menedżera plików od producenta lub ten, który jest preinstalowany, jest dość ograniczony. W takich przypadkach Korzystanie z przeglądarki Chrome, Edge lub innej opartej na silniku Chromium jako przeglądarki tymczasowej może pomóc w wyjściu z opresji..

Sztuczka jest bardzo prosta: Otwórz przeglądarkę opartą na Chromium (Chrome, Edge, Brave itp.) i wpisz adres w pasku adresu plik: /// sdcard /Android identyfikuje magazynowanie główny wewnętrzny jako sdcard, w bardzo podobny sposób, w jaki system Windows używa dysku C: jako dysku głównego.

Po uruchomieniu tego adresu przeglądarka zazwyczaj poprosi o pozwolenie na odczyt pamięci wewnętrznej. Po udzieleniu tego uprawnienia zostanie wyświetlony indeks pokazujący główne foldery pamięci wewnętrznej.Stąd możesz wchodzić i wychodzić z folderów dokładnie tak, jakbyś przeglądał stronę internetową zawierającą linki.

W każdym folderze zobaczysz zarówno podfoldery, jak i pliki. Pliki są wyświetlane z pełną nazwą, łącznie z rozszerzeniem, rozmiarem i datą ostatniej modyfikacji.Poniżej znajdują się również następujące pozycje: ukryte foldery, które w systemie Android zwykle zaczynają się kropką, jak .nomedia lub inne podobne.

Chociaż lista jest bardzo spartańska, Większość nowoczesnych przeglądarek umożliwia bezpośrednie otwieranie wielu typów plików poprzez ich dotknięcie.Obrazy, filmy, pliki audio, dokumenty tekstowe itd. Nie ma miniatur ani podglądów, ale samo kliknięcie nazwy pliku spowoduje, że przeglądarka spróbuje go wyświetlić lub odtworzyć.

Zmień Chrome i Edge w mały eksplorator plików na swoim komputerze

Na komputerach stacjonarnych, zarówno w systemie Windows, jak i innych systemach, Możesz również używać przeglądarek Chrome, Edge i innych opartych na Chromium do nawigacji po dyskach lokalnych za pomocą file:///Zasada jest taka sama jak w Androidzie, ale ścieżka jest inna.

Jeśli używasz systemu Windows, dyskiem głównym jest najczęściej C:. W takim przypadku wpisz w pasku adresu plik:///C: i naciśnij EnterPrzeglądarka pokaże Ci zawartość katalogu głównego tego dysku: foldery takie jak Windows, Program Files, Usuarios, itp.

Jeśli masz więcej dysków lub partycji, Możesz zastąpić literę w adresie URL odpowiednią literą., Na przykład file:///D: na inny album lub file:///E: dla pamięci USB że został zamontowany z tą literą. Następnie kliknij foldery, aby przejść dalej i użyj przycisku Wstecz w przeglądarce, aby wrócić.

Tak jak na Androidzie, W każdym folderze zobaczysz pliki i podfoldery z widocznym rozmiarem, datą modyfikacji i rozszerzeniemNie generuje miniatur ani ładnych ikon, ale jest wystarczający, aby zlokalizować konkretny plik lub szybko sprawdzić strukturę katalogów.

Większość przeglądarek Chromium Umożliwiają bezpośrednie otwieranie plików multimedialnych, a nawet niektórych formatów dokumentów. Wystarczy na nie kliknąć. Obrazy, filmy, pliki audio i zwykłe pliki tekstowe są wyświetlane w sposób naturalny na karcie.

Otwieraj pliki lokalne w przeglądarkach Chrome i Firefox bez ręcznego wpisywania file:///

Oprócz wpisywania tras z file:///Przeglądarki zawierają skróty zaprojektowane specjalnie do szybkiego otwierania plików lokalnych. Na przykład w Chrome możesz użyć skrótu klawiaturowego Ctrl + O (Control + O), gdy okno przeglądarki jest aktywne.

Naciskając ten skrót, Otworzy się typowe okno dialogowe systemu operacyjnego „Otwórz plik”Wystarczy znaleźć interesujący Cię plik, zaznaczyć go i potwierdzić. Chrome załaduje go na bieżącej karcie lub na nowej, w zależności od typu pliku i Twoich preferencji.

Firefox oferuje kilka opcji. Z jednej strony, Możesz przejść do menu głównego i wybrać opcję „Otwórz plik...”który robi dokładnie to samo: wyświetla systemowe okno wyboru plików. Alternatywnie możesz bezpośrednio wpisać ścieżkę w pasku adresu: file:///// tak aby przeglądarka uruchamiała się wyświetlając zawartość dysku C: w systemie Windows.

Za pomocą każdej z tych metod, W praktyce oznacza to, że przeglądarka staje się lokalną przeglądarką plików.Może ci pomóc, gdy Eksplorator Windows Aplikacja zawiesza się, gdy występują problemy z typowym menedżerem plików lub gdy po prostu chcemy otworzyć dokument, który przeglądarka obsługuje szczególnie dobrze.

Interfejs API dostępu do systemu plików: przejście od przeglądarki do edytora

Wszystko, co do tej pory widzieliśmy, opiera się na „ręcznym” użyciu polecenia file:/// i okien dialogowych otwierania plików, czyli na czynnościach, które użytkownik wykonuje ręcznie. Jednak od pewnego czasu przeglądarki oparte na Chromium zawierają interfejs API dostępu do systemu plików, która daje aplikacjom internetowym możliwość pracy z plikami lokalnymi w znacznie bardziej zaawansowany sposób.

To API umożliwia witrynie internetowej, po uzyskaniu Twojej zgody, Odczytuj i zapisuj zmiany bezpośrednio w plikach i folderach na swoim urządzeniuDzięki temu poważne edytory tekstu i środowiska IDE można tworzyć bezpośrednio w przeglądarce. programowanie, edytory zdjęć i wideo, menedżerowie projektów i wiele innych narzędzi, których tworzenie wcześniej było sensowne wyłącznie w formie aplikacji desktopowych.

Ważne jest, aby nie mylić tego nowoczesnego API ze starszymi lub przestarzałymi interfejsami. To nie jest to samo co interfejs FileSystem ani API wpisów plików i katalogów, ani stara specyfikacja „API plików: katalogi i system”, w którym zaproponowano inne mechanizmy obsługi hierarchii plików i obszarów przechowywania plików w piaskownicach.

Aktualny interfejs API dostępu do systemu plików Został zaprojektowany ze szczególną dbałością o bezpieczeństwo, uprawnienia i komfort użytkownika.Zawsze wymaga wykonania wyraźnych czynności (takich jak kliknięcie przycisku), aby otworzyć selektor plików lub katalogów, a użytkownik zawsze wie, do jakich ścieżek udziela dostępu.

Jeśli chodzi o kompatybilność, Interfejs API działa w większości przeglądarek opartych na Chromium w systemach Windows, macOS, Linux, ChromeOS i AndroidGodnym uwagi wyjątkiem jest Brave, gdzie nadal konieczne jest aktywowanie flagi, aby z niej skorzystać. Inne przeglądarki inne niż Chromium mogą jej nie implementować lub implementować ją tylko częściowo.

Sprawdź, czy przeglądarka obsługuje interfejs API dostępu do systemu plików

Pierwszą rzeczą, którą chcesz sprawdzić jako programista, jest to, czy przeglądarka użytkownika obsługuje to API, zanim spróbujesz z niego skorzystać. Najprostszym sposobem jest sprawdzenie, czy odpowiednie metody wyboru plików istnieją w obiekcie globalnym.na przykład sprawdzając czy showOpenFilePicker jest dostępny w window (o self (w pracowniku)

Typowy wzór wygląda mniej więcej tak: „Jeśli opcja 'showOpenFilePicker' jest ustawiona na self, to mogę skorzystać z API; w przeciwnym razie muszę uciec się do alternatywnej metody.”Umożliwia to wdrażanie rozwiązań hybrydowych, w których przy zapewnieniu wsparcia wykorzystywane są zalety interfejsu API, a przy jego braku stosuje się tradycyjne techniki, takie jak formularze do przesyłania plików.

To też dobry pomysł Przetestuj na przeglądarkach docelowych i na różnych OSPonieważ nawet jeśli bazą jest Chromium, niektórzy producenci mogą włączać lub wyłączać określone funkcje ze względów bezpieczeństwa, polityki lub wydajności.

Pierwszy przykład: otwieranie pliku lokalnego z aplikacji internetowej

Jednym z kanonicznych przykładów zrozumienia tego interfejsu API jest budowanie edytor tekstu pojedynczego pliku, który umożliwia otwieranie, modyfikowanie i zapisywanie dokumentuNie musi być spektakularne: jeśli tylko potrafi czytać i zapisywać zwykły tekst, od razu widać, jak działa.

Punktem wejścia jest tutaj metoda window.showOpenFilePicker(). Tę metodę można wywołać tylko w bezpiecznym kontekście (HTTPS) i w odpowiedzi na gest użytkownikaWyświetla natywne okno dialogowe, w którym użytkownik może wybrać plik. Po wybraniu zwraca tablicę uchwytów, zazwyczaj z jednym FileSystemFileHandle.

W tym uchwycie przechowywane są wszystkie informacje i metody niezbędne do pracy z wybranym plikiem. Dobrym pomysłem jest zapisanie odniesienia do uchwytu, ponieważ to właśnie tego będziesz później używać do odczytu pliku, zapisywania zmian lub wykonywania innych operacji.Dopóki zachowasz ten uchwyt i użytkownik nie odwoła uprawnień, Twoja aplikacja będzie mogła korzystać z pliku.

Gdy już to zrobisz FileSystemFileHandle, możesz zdobyć obiekt File prawdziwe powołanie handle.getFile()Ten obiekt File Zawiera dane pliku w postaci blobu, a do jego zawartości można uzyskać dostęp za pomocą metod takich jak: text(), arrayBuffer(), stream() o slice() jeśli potrzebujesz dostępu losowego.

W praktyce, w przypadku prostego edytora tekstu, Zwykłą rzeczą jest użycie file.text() aby uzyskać pełną zawartość jako ciąg znakówi włóż ten tekst do <textarea> aby użytkownik mógł go edytować. Ważne jest, aby pamiętać, że obiekt File Traci ona ważność, jeśli plik zostanie zmodyfikowany na dysku w inny sposób. W takim przypadku zaleca się ponowne wywołanie. getFile().

Zapisz zmiany: zapisz w lokalnym systemie plików

Aby zapisać zmiany wprowadzone przez użytkownika, API oferuje dwie typowe ścieżki: „prosty” zapis, który nadpisuje oryginalny plik i „Zapisz jako”, który tworzy nowy plikPodstawowa różnica polega na tym, czy masz już uchwyt do pliku docelowego, czy też chcesz, aby użytkownik wybrał nową ścieżkę i nazwę.

Jeśli chcesz utworzyć nowy plik lub zapisać kopię pod inną nazwą, powinieneś użyć showSaveFilePicker()Ta metoda otwiera selektor plików w trybie zapisu, umożliwiając użytkownikowi określenie nazwy, folderu i rozszerzenia. Możesz podać opcje sugerujące typy plików, na przykład wskazując, że jest to dokument tekstowy, a preferowanym rozszerzeniem jest . .txt.

Jest to ważny szczegół Powinieneś zadzwonić showSaveFilePicker() bezpośrednio w odpowiedzi na gest użytkownika (na przykład klikając przycisk „Zapisz”) i nie opóźniaj tego, gdy intensywnie przetwarzasz dane. Jeśli wykonasz wszystkie prace wstępne, a następnie z opóźnieniem spróbujesz otworzyć okno dialogowe, przeglądarka może zgłosić błąd bezpieczeństwa, ponieważ nie będzie już uważać, że „obsługujesz gest użytkownika”.

Gdy już masz FileSystemFileHandle wskazując plik, który chcesz zapisać, Następnym krokiem jest utworzenie FileSystemWritableFileStream przy fileHandle.createWritable()Ten strumień będzie używany do zapisu danych. Jeśli przeglądarka wykryje, że nie masz jeszcze uprawnień do zapisu, wyświetli okno dialogowe z prośbą o uprawnienia; jeśli użytkownik je odrzuci, wywołanie zgłosi wyjątek.

Z prądem w ręku, Po prostu zadzwoń writable.write(contenido) ze sznurkiem, Blobem lub BufferSourceMożesz nawet bezpośrednio przekazać treść odpowiedzi HTTP do strumienia za pomocą response.body.pipeTo(writable)Po zakończeniu pisania zamknij transmisję za pomocą writable.close(), czyli moment, w którym zmiany zostają skonsolidowane na dysku.

Gdy strumień jest otwarty, możesz również użyć takich metod jak: seek() o truncate() dla przesuń wskaźnik zapisu do określonej pozycji lub zmień rozmiar plikuNależy jednak pamiętać, że zmiany nie zostaną zastosowane na stałe, dopóki strumień nie zostanie zamknięty.

Zaproponuj użytkownikowi nazwę pliku i folder domowy

API dba również o komfort użytkownika w oknach dialogowych systemu. Na przykład: Możesz określić sugerowaną nazwę pliku podczas wywoływania showSaveFilePicker()Dzięki temu użytkownik zobaczy coś bardziej opisowego, na przykład „Nowy dokument.txt”, zamiast ogólnego komunikatu „Brak tytułu”.

Podobnie Można zasugerować początkowy folder, w którym uruchomi się selektor plików.Odbywa się to poprzez przekazanie właściwości startIn kiedy dzwonisz showSaveFilePicker(), showOpenFilePicker() o showDirectoryPicker()Wartości mogą być ciągami znaków, takimi jak desktop, documents, downloads, music, pictures o videos, które odpowiadają standardowym lokalizacjom systemu.

Ponadto masz możliwość użyj jako wartości startIn menedżer plików lub katalogów, który już posiadaszW takim przypadku okno dialogowe otwiera się bezpośrednio w folderze, w którym znajduje się dany uchwyt, co jest bardzo wygodne, jeśli chcemy wznowić kontekst roboczy ostatniej sesji.

Jeśli Twoja aplikacja obsługuje różne typy plików (na przykład dokumenty tekstowe i osadzone obrazy), Możesz zdefiniować różne identyfikatory dla każdego typu okna dialogowegoW ten sposób przeglądarka zapamięta ostatnio używany folder dla każdego identyfikatora i nie pomylisz ścieżek dokumentów ze ścieżkami obrazów.

Zapamiętaj ostatnie pliki i foldery dzięki IndexedDB

Jedną z zalet File System Access jest to, że jego procedury obsługi można serializować. Oznacza to, że możesz przechowywać FileSystemFileHandle y FileSystemDirectoryHandle w IndexedDB i pobierać je w kolejnych sesjach, zawsze przestrzegając zasad dotyczących uprawnień.

Dzięki temu aplikacje internetowe mogą oferować typowe funkcjonalności komputerów stacjonarnych, takie jak: listy ostatnich plików, ponowne otwieranie ostatniego projektu lub odzyskiwanie poprzedniego folderu roboczegoWystarczy zapisać uchwyty w bazie danych przeglądarki i odczytać je po uruchomieniu aplikacji.

Gdy odzyskasz zapisany uchwyt, Nie zakładaj, że pozwolenia pozostaną w mocy.Przeglądarka może zdecydować, że konieczne jest ponowne zażądanie autoryzacji, na przykład z powodu upływu czasu lub zamknięcia ostatniej karty z tego źródła. Dlatego zaleca się, aby kod sprawdzał taką sytuację.

W przypadku tego sprawdzenia, API zawiera metody queryPermission() y requestPermission() zarówno w obsłudze plików, jak i katalogówNajpierw pytasz o status uprawnienia i jeśli nie jest ono „przyznane”, możesz ponownie poprosić użytkownika o jego przyznanie, wskazując w opcjach, czy potrzebujesz tylko uprawnień do odczytu, czy do odczytu i zapisu.

Dobrą praktyką jest połącz oba kroki w jedną funkcję pomocy Mając uchwyt i tryb (tylko do odczytu lub odczyt/zapis), powinien sprawdzić, czy uprawnienie zostało już przyznane, a jeśli nie, wyświetlić odpowiedni monit. Zmniejsza to liczbę okien dialogowych i poprawia komfort użytkowania.

Otwieraj i przeglądaj całe katalogi z poziomu przeglądarki

Oprócz pojedynczych plików API umożliwia pracę na całych folderach. z showDirectoryPicker() użytkownik może wybrać cały kataloga aplikacja otrzymuje FileSystemDirectoryHandle który umożliwia dostęp do wszystkich jego elementów.

Domyślnie będziesz mieć uprawnienia do odczytu plików w tym katalogu, ale jeśli będziesz musiał, będziesz mógł również do nich zapisywać Możesz poprosić o dostęp do odczytu i zapisu, przekazując { mode: 'readwrite' } podczas dzwonienia showDirectoryPicker()Od tego momentu Twoja aplikacja może wyświetlać i modyfikować zawartość zgodnie z udzielonymi uprawnieniami.

Aby poruszać się po folderze, Można iterować asynchronicznie dirHandle.values()który zwraca kolejno zawarte w nim elementy: pliki i podkatalogi. Każdy wpis ma właściwość kind który powie Ci, czy to jest "file" lub "directory".

Jeśli potrzebujesz uzyskać dostęp do informacji o każdym pliku, np. o jego rozmiarze, możesz zadzwonić entry.getFile(). W takich przypadkach zaleca się przeprowadzenie odczytów równolegle, używając Promise.all() lub podobnych technik, zamiast wykonywać je po kolei w ściśle określonej kolejności, co może być wolniejsze.

Można to również zrobić z katalogu utwórz nowe foldery lub pliki za pomocą getDirectoryHandle() y getFileHandle()Możesz określić w opcjach, czy chcesz je utworzyć, jeśli jeszcze nie istnieją. Na przykład, możesz skonfigurować strukturę projektu, taką jak „Mój projekt/Kod/Notatki.txt”, bezpośrednio z poziomu aplikacji internetowej.

Zarządzaj plikami: usuwaj, zmieniaj nazwy i przenoś

API nie ogranicza się tylko do odczytu i zapisu. Umożliwia również usuwanie plików i folderów z katalogu za pomocą removeEntry() ponad FileSystemDirectoryHandleJeżeli jest to folder, możesz wykonać operację usuwania rekurencyjnego, tak aby obejmowała ona wszystkie jego podfoldery i pliki.

Jeżeli zamiast przechodzić przez katalog, chcesz działać bezpośrednio na uchwycie pliku lub folderu, Niektóre przeglądarki oferują tę metodę remove() en FileSystemFileHandle y FileSystemDirectoryHandleW ten sposób usuniesz dany element bez konieczności odwoływania się do jego nazwy w katalogu nadrzędnym.

W przypadku operacji organizacyjnych, takich jak zmiana nazwy lub przenoszenie elementów do innego folderu, Jest metoda move() w interfejsie FileSystemHandleMożna bezpośrednio przekazać mu nową nazwę, katalog docelowy lub katalog i nową nazwę, aby przenieść go i zmienić jego nazwę jednocześnie.

Istnieją jednak pewne niuanse dotyczące kompatybilności: wsparcie move() Jest bardziej dojrzały dla plików w źródłowym prywatnym systemie plików (OPFS)i nadal mogą być ukryte pod flagami lub nie być zaimplementowane dla wszystkich scenariuszy lub katalogów w niektórych przeglądarkach.

Przeciągnij i upuść pliki i foldery do sieci

Interfejs API dostępu do systemu plików bardzo dobrze integruje się z systemem „przeciągnij i upuść” HTML. Gdy użytkownik przeciąga pliki lub foldery z systemu operacyjnego na stronę internetowąPrzeglądarka tworzy elementy DataTransferItem współpracownicy.

Poprzez metodę DataTransferItem.getAsFileSystemHandle(), możesz dostać FileSystemFileHandle czy element jest plikiem czy FileSystemDirectoryHandle jeśli to katalogDzięki temu aplikacja może umożliwiać użytkownikowi przeciąganie i upuszczanie całych folderów ze zdjęciami i bezpośrednią pracę na ich zawartości.

Należy pamiętać, że w kontekście przeciągania i upuszczania, DataTransferItem.kind Zarówno dla plików, jak i folderów zawsze będzie to „plik”Rozróżnienie między plikiem a katalogiem uzyskasz, sprawdzając właściwość kind del FileSystemHandle to ci oddaje getAsFileSystemHandle()który będzie rozróżniał pomiędzy "file" y "directory".

Prywatny system plików źródłowych (OPFS) i zoptymalizowany dostęp

Przeglądarki Chromium oprócz dostępu do plików i folderów użytkownika oferują: prywatny system plików źródłowych (OPFS)Jest to przestrzeń dyskowa przypisana do każdej witryny internetowej, do której użytkownik nie ma bezpośredniego dostępu z poziomu systemu operacyjnego.

W praktyce oznacza to, że Mimo że przeglądarka wewnętrznie przechowuje te dane na dysku, użytkownik nie znajdzie ich jako „zwykłych” plików w żadnym starym folderze.Może to być baza danych, pliki spakowane lub dowolna wewnętrzna struktura, którą przeglądarka uzna za odpowiednią.

Z poziomu API możesz uzyskać dostęp do katalogu głównego tego prywatnego systemu, używając navigator.storage.getDirectory(), który zwraca FileSystemDirectoryHandle. Stamtąd możesz tworzyć pliki i katalogi, odczytywać je, zapisywać do nich, zmieniać ich nazwy lub usuwać je tak, jakby były elementami lokalnego systemu plikówAle pamiętaj, że są one odizolowane i przeznaczone wyłącznie do obsługi Twojej aplikacji internetowej.

W przypadku bardziej zaawansowanych potrzeb wydajnościowych, Chromium zawiera specjalny typ pliku ze zoptymalizowanym dostępem synchronicznym. Przez fileHandle.createSyncAccessHandle() (dostępne w procesach roboczych) możesz uzyskać uchwyt umożliwiający synchroniczne i wyłączne odczytywanie i zapisywanie, co jest przydatne w przypadku bardzo intensywnego lub wrażliwego na opóźnienia użycia.

Uzyskanie uchwytu nadal odbywa się asynchronicznie, ale gdy już go zdobędziesz, Operacje odczytu i zapisu są wykonywane jako bezpośrednie wywołania, manipulując buforami bajtów.Jest to rozwiązanie bardzo zbliżone pod względem wydajności do aplikacji natywnej, ale bez opuszczania środowiska sieciowego i utrzymywania izolacji od prywatnego systemu źródłowego.

Polyfille i alternatywy w przypadku braku natywnego wsparcia

Chociaż API dostępu do systemu plików oferuje wiele możliwości, Nie wszystkie przeglądarki jeszcze to obsługująNie jest możliwe stworzenie kompletnego polyfilla, który replikowałby wszystkie jego możliwości, głównie dlatego, że nie ma sposobu na wiarygodne symulowanie dostępu do natywnego systemu plików bez współpracy samej przeglądarki.

Niektóre części można jednak przybliżyć. Naśladować showOpenFilePicker() prosty <input type="file">, który wyświetla pole wyboru pliku i umożliwia użytkownikowi wybranie jednego lub większej liczby plików.

Coś podobnego dzieje się z oszczędzaniem. Naśladować showSaveFilePicker() często używa się linku <a download="nombre"> Kliknięcie inicjuje pobieranie blobu wygenerowanego z JavaScript. Pozwala to na „zapisanie” danych wygenerowanych przez stronę internetową, choć nie oferuje opcji nadpisywania istniejących plików.

Jeśli chodzi o wybieranie całych katalogów, atrybut niestandardowy był tradycyjnie używany webkitdirectory en <input type="file">który pozwala wybrać folder i otrzymać listę zawartych w nim plików. Nie jest to rozwiązanie uniwersalne ani tak wydajne, jak showDirectoryPicker()ale obejmuje niektóre przypadki.

Aby ujednolicić te podejścia, Są takie księgarnie jak dostęp do systemu plików przeglądarki Starają się korzystać z nowoczesnego interfejsu API, jeśli jest on dostępny, a jeśli nie jest dostępny, automatycznie wracają do lepszych alternatyw.Dzięki temu programista pisze stosunkowo jednolity kod, a biblioteka dba o dostosowanie się do środowiska.

Bezpieczeństwo, uprawnienia i kontrola użytkowników

Cała ta władza wiąże się z odpowiedzialnością i zespoły tworzące przeglądarki są tego bardzo świadome. Projekt interfejsu API dostępu do systemu plików opiera się na dwóch zasadach: kontroli użytkownika i przejrzystości.Nie ma możliwości, aby strona internetowa mogła potajemnie odczytać połowę dysku twardego.

Gdy użytkownik otwiera plik za pomocą pól wyboru (w celu odczytania lub zapisania nowego), To gest, który udziela uprawnień do odczytu lub zapisu konkretnego pliku lub folderuJeżeli użytkownik zmieni zdanie i anuluje dialog, strona internetowa nie otrzyma niczego i nie uzyska dostępu.

Aby zapisać nowy plik, kliknij pole „Zapisz” Umożliwia nie tylko wybranie nazwy i ścieżki, ale także pełni funkcję udzielenia uprawnień do zapisu nowo utworzonego pliku.Logika jest taka sama, jak ta stosowana od lat w takich elementach jak <input type="file">ale rozszerzony o więcej możliwości.

Gdy aplikacja internetowa chce zmodyfikować plik, który już istnieje, Nie może tego zrobić ot tak; przeglądarka może wyświetlić specjalne powiadomienie z prośbą o pozwolenie na zapis do niej.To okno dialogowe można otworzyć wyłącznie w odpowiedzi na działanie użytkownika, np. naciśnięcie przycisku „Zapisz zmiany”.

Jeżeli użytkownik zdecyduje się nie przyznać uprawnienia do zapisu, Strona internetowa musi oferować jakąś alternatywę: pobranie kopii, zapisanie w chmurze, pracę w OPFS lub inny podobny mechanizm.Pomysł jest taki, że użytkownik zawsze ma ostatnie słowo w kwestii tego, co dzieje się w jego lokalnym systemie.

Jeśli chodzi o przejrzystość, Przeglądarki wyświetlają ikonę na pasku adresu, gdy witryna internetowa ma dostęp do plików lokalnychPo kliknięciu ikony użytkownik zobaczy listę plików lub folderów, do których strona ma w danej chwili dostęp, a uprawnienia będzie mógł w każdej chwili cofnąć.

Pozwolenia nie są trwałe. Zasadniczo strona zachowuje możliwość zapisywania plików tak długo, jak długo otwarta jest przynajmniej jedna karta z danego źródła.Gdy wszystkie zostaną zamknięte, przeglądarka może uznać, że sesja się zakończyła i przy następnym użyciu konieczne będzie ponowne żądanie uprawnień do tych plików lub katalogów.

Łącząc schemat file:/// w celu otwarcia określonych zasobów, skróty klawiaturowe do przesyłania plików lokalnych i interfejsu API dostępu do systemu plików w celu głębokiej integracji Dzięki temu przeglądarka stała się o wiele bardziej wszechstronnym narzędziem zarówno dla użytkowników, jak i programistów.umożliwiając szybkie przeglądanie filmów zapisanych na dysku lub edycję całych projektów bez opuszczania środowiska internetowego.