Cara membuka file lokal di browser dengan file:///

Menggunakan browser seolah-olah itu adalah penjelajah file kecil dimungkinkan dan, jika digunakan dengan benar, dapat sangat bermanfaat. Mulai dari membuka dokumen lokal sederhana dengan file:/// hingga bekerja dengan API Akses Sistem File yang canggih.Saat ini, peramban modern menawarkan lebih banyak kemungkinan daripada yang biasanya kita gunakan.

Sepanjang panduan ini kita akan melihat, langkah demi langkah, cara membuka file lokal di web browser menggunakan file:/// di Chrome, Edge, dan FirefoxCara mengubah browser Anda menjadi penjelajah file dasar di Windows dan Android, dan bagaimana pengembang dapat melangkah lebih jauh menggunakan File System Access API untuk membaca, menulis, dan mengelola file dan folder lokal dari aplikasi web.

Apa sebenarnya arti membuka file lokal dengan file:///

Saat Anda menulis rute yang dimulai dengan file:/// di bilah alamat browser, Anda memerintahkan browser untuk mengakses sistem file lokal, bukan internet.Artinya, untuk membuka sesuatu yang ada di perangkat Anda sendiri: hard drive, memori internal, atau kartu SD.

Skema URL khusus ini (file:///) Cara kerjanya mirip dengan mengetik C: di Windows atau / di Linux dan macOSIni hanya disesuaikan dengan logika browser. Dari situ, yang akan Anda lihat adalah semacam daftar folder dan file, tanpa embel-embel apa pun: nama, ukuran, tanggal modifikasi, dan sedikit informasi lainnya.

Tentu saja, harus selalu diingat itu Browser memperlakukan rute lokal ini dengan banyak pembatasan keamanan.Sebagai contoh, situs web yang Anda kunjungi dari internet, secara default, tidak dapat dengan bebas membaca file lokal Anda hanya karena Anda membuka URL dengan file:///Isyarat atau izin eksplisit dari pengguna selalu diperlukan.

Menggunakan browser sebagai penjelajah file di Android

Banyak ponsel Android tidak menyertakan pengelola file yang layak dari pabrikan, atau pengelola file bawaan yang terpasang cukup terbatas. Dalam kasus tersebut, Menggunakan Chrome, Edge, atau browser berbasis Chromium lainnya sebagai browser sementara dapat menyelamatkan Anda dari kesulitan..

Triknya sangat sederhana: Buka browser berbasis Chromium Anda (Chrome, Edge, Brave, dll.) dan ketikkan alamat di bilah alamat. file: /// kartu sd /Android mengidentifikasi penyimpanan internal utama sebagai sdcard, dengan cara yang sangat mirip dengan bagaimana Windows menggunakan C: sebagai drive utama.

Saat Anda membuka alamat tersebut, browser biasanya akan meminta izin untuk membaca penyimpanan internal. Setelah Anda memberikan izin tersebut, sebuah indeks akan muncul yang menunjukkan folder akar memori internal Anda.Dari situ Anda dapat masuk dan keluar folder persis seperti saat menjelajahi situs web dengan tautan.

Di setiap folder Anda akan melihat subfolder dan file. File ditampilkan dengan nama lengkapnya, termasuk ekstensi, ukurannya, dan tanggal modifikasi terakhir.Berikut ini juga tercantum: folder tersembunyi, yang di Android biasanya diawali dengan titik, seperti .nomedia atau yang serupa lainnya.

Meskipun daftarnya sangat sederhana, Sebagian besar browser modern mampu membuka berbagai jenis file secara langsung hanya dengan mengetuknya.Gambar, video, audio, dokumen teks, dll. Tidak ada thumbnail atau pratinjau, tetapi cukup dengan mengklik nama file akan menyebabkan browser mencoba menampilkan atau memutarnya.

Ubah Chrome dan Edge menjadi penjelajah file kecil di PC Anda.

Pada komputer desktop, baik yang menggunakan Windows maupun sistem operasi lainnya, Anda juga dapat menggunakan Chrome, Edge, dan browser berbasis Chromium lainnya untuk menavigasi drive lokal Anda dengan file:///Prinsipnya sama seperti di Android, tetapi jalurnya berbeda.

Jika Anda menggunakan Windows, drive utama biasanya adalah C:. Dalam hal ini, ketik di bilah alamat file:///C: dan tekan EnterBrowser akan menampilkan isi dari direktori utama drive tersebut: folder-folder seperti Windows, Program Files, Usuarios, Dll

Jika Anda memiliki lebih banyak drive atau partisi, Anda dapat mengganti huruf dalam URL dengan huruf yang sesuai.. Sebagai contoh file:///D: untuk album lain atau file:///E: untuk sebuah kenangan USB bahwa itu dipasang dengan surat itu. Dari sana, klik folder untuk maju dan gunakan tombol kembali browser untuk kembali.

Sama seperti di Android, Di setiap folder, Anda akan melihat file dan subfolder dengan ukuran, tanggal modifikasi, dan ekstensi yang terlihat.Meskipun tidak menghasilkan thumbnail atau ikon yang menarik, fitur ini cukup untuk menemukan file tertentu atau melihat sekilas struktur direktori.

Sebagian besar browser Chromium Aplikasi ini memungkinkan Anda untuk langsung membuka file multimedia dan bahkan beberapa format dokumen. Cukup dengan mengkliknya. Gambar, video, audio, atau file teks biasa akan ditampilkan dengan mudah di dalam tab tersebut.

Buka file lokal di Chrome dan Firefox tanpa mengetikkan file:/// secara manual.

Selain mengetik rute dengan file:///Browser menyertakan pintasan yang dirancang khusus untuk membuka file lokal dengan cepat. Di Chrome, misalnya, Anda dapat menggunakan pintasan keyboard Ctrl + O. (Control + O) saat jendela browser aktif.

Dengan menekan tombol pintasan itu, Kotak dialog "Buka File" standar sistem operasi akan terbuka.Cukup temukan file yang Anda inginkan, pilih, dan konfirmasi. Chrome akan memuatnya di tab saat ini atau tab baru, tergantung pada jenis file dan preferensi Anda.

Firefox menawarkan beberapa pilihan. Di satu sisi, Anda dapat pergi ke menu utama dan memilih opsi "Buka file...".yang melakukan hal yang persis sama: menampilkan jendela pemilihan file sistem. Atau, Anda dapat langsung mengetikkan jalur seperti ini ke bilah alamat: file:///// sehingga browser akan menampilkan isi drive C: di Windows saat pertama kali dibuka.

Dengan salah satu metode ini, Hasil praktisnya adalah browser menjadi penampil file lokal.Ini bisa membantu Anda ketika Windows Explorer Aplikasi akan macet saat Anda mengalami masalah dengan pengelola file biasa atau hanya saat Anda ingin membuka jenis dokumen yang ditangani dengan sangat baik oleh browser.

API Akses Sistem Berkas: lompatan dari penampil ke editor

Semua yang telah kita lihat sejauh ini didasarkan pada penggunaan "manual" file:/// dan kotak dialog buka file, yaitu hal-hal yang dilakukan pengguna secara manual. Namun, sejak beberapa waktu lalu, browser berbasis Chromium telah mengintegrasikan File System Access API.yang memberikan kemampuan kepada aplikasi web untuk bekerja dengan file lokal dengan cara yang jauh lebih canggih.

API ini memungkinkan sebuah situs web, setelah meminta izin Anda, Baca dan simpan perubahan langsung pada file dan folder di perangkat Anda.Berkat hal ini, editor teks dan IDE yang serius dapat dibuat langsung dari browser. pemrograman, editor foto dan video, pengelola proyek, dan banyak alat lainnya yang sebelumnya hanya masuk akal untuk dikembangkan sebagai aplikasi desktop.

Penting untuk tidak mengacaukan API modern ini dengan API yang lebih lama atau sudah usang. Ini tidak sama dengan antarmuka. FileSystem baik API Entri File dan Direktori maupun spesifikasi lama “API File: Direktori dan Sistem”, yang mengusulkan mekanisme lain untuk menangani hierarki file dan area penyimpanan sandbox.

API Akses Sistem Berkas saat ini Sistem ini dirancang dengan sangat hati-hati dalam hal keamanan, izin, dan pengalaman pengguna.Selalu diperlukan tindakan eksplisit (seperti mengklik tombol) untuk membuka pemilih file atau direktori, dan pengguna selalu memahami dengan jelas jalur pasti yang mereka berikan aksesnya.

Mengenai kompatibilitas, API ini berfungsi di sebagian besar browser berbasis Chromium pada Windows, macOS, Linux, ChromeOS, dan Android.Salah satu pengecualian yang perlu diperhatikan adalah Brave, di mana masih perlu mengaktifkan sebuah flag untuk menggunakannya. Browser non-Chromium lainnya mungkin tidak mengimplementasikannya atau hanya sebagian saja.

Periksa apakah browser mendukung File System Access API.

Sebagai pengembang, hal pertama yang ingin Anda ketahui adalah apakah browser pengguna mendukung API ini sebelum mencoba menggunakannya. Cara paling sederhana adalah dengan memeriksa apakah metode pemilihan file yang sesuai ada di objek global.misalnya, dengan memeriksa apakah showOpenFilePicker tersedia di window (o self (pada seorang pekerja).

Pola umumnya kurang lebih seperti ini: “Jika 'showOpenFilePicker' diatur ke self, maka saya dapat menggunakan API; jika tidak, saya harus menggunakan metode alternatif.”Hal ini memungkinkan implementasi solusi hibrida di mana, jika ada dukungan, keunggulan API dimanfaatkan, dan jika tidak ada dukungan, teknik tradisional seperti formulir unggah file digunakan.

Itu juga ide yang bagus Uji coba pada browser target dan pada berbagai kondisi. sistem operasiKarena meskipun basisnya adalah Chromium, beberapa produsen mungkin mengaktifkan atau menonaktifkan fitur tertentu karena alasan keamanan, kebijakan, atau kinerja.

Contoh pertama: membuka file lokal dari aplikasi web.

Salah satu contoh utama untuk memahami API ini adalah membangun sebuah Editor teks satu file yang memungkinkan Anda membuka, memodifikasi, dan menyimpan dokumen.Tidak perlu spektakuler: selama bisa membaca dan menulis teks biasa, itu sudah menggambarkan cara kerjanya.

Titik masuknya di sini adalah metodenya. window.showOpenFilePicker(). Metode ini hanya dapat dipanggil dalam konteks yang aman (HTTPS) dan sebagai respons terhadap isyarat pengguna.Fungsi ini menampilkan dialog asli agar pengguna dapat memilih file. Setelah dipilih, fungsi ini mengembalikan array handle, biasanya dengan satu handle saja. FileSystemFileHandle.

Handle tersebut menyimpan semua informasi dan metode yang diperlukan untuk bekerja dengan file yang dipilih. Sebaiknya simpan referensi ke handle tersebut, karena itulah yang akan Anda gunakan nanti untuk membaca file, menyimpan perubahan, atau melakukan operasi lainnya.Selama Anda mempertahankan handle tersebut dan pengguna belum mencabut izinnya, aplikasi Anda akan dapat berinteraksi dengan file tersebut.

Setelah Anda memilikinya FileSystemFileHandle, Anda bisa mendapatkan objek tersebut File panggilan sejati handle.getFile()Objek ini File Ini berisi data file sebagai blob, dan Anda dapat mengakses isinya menggunakan metode seperti text(), arrayBuffer(), stream() o slice() Jika Anda memerlukan akses acak.

Dalam praktiknya, untuk editor teks sederhana, Hal yang biasa dilakukan adalah menggunakan file.text() untuk mendapatkan konten lengkap sebagai sebuah string.dan masukkan teks itu ke dalam sebuah <textarea> agar pengguna dapat mengeditnya. Penting untuk dicatat bahwa objek tersebut File Fungsi ini tidak lagi valid jika file dimodifikasi di disk dengan cara lain, dalam hal ini disarankan untuk memanggilnya kembali. getFile().

Simpan perubahan: tulis ke sistem file lokal

Untuk menyimpan perubahan yang telah diedit pengguna, API menawarkan dua jalur umum: opsi "simpan sederhana" yang menimpa file asli dan opsi "Simpan Sebagai" yang membuat file baru.Perbedaan mendasar terletak pada apakah Anda sudah memiliki akses ke file tujuan atau apakah Anda perlu meminta pengguna untuk memilih jalur dan nama baru.

Saat Anda ingin membuat file baru atau menyimpan salinan dengan nama yang berbeda, kamu harus menggunakan showSaveFilePicker()Metode ini membuka pemilih file dalam mode tersimpan, memungkinkan pengguna untuk menentukan nama, folder, dan ekstensi. Anda dapat memberikan opsi untuk menyarankan jenis file, misalnya, menunjukkan bahwa itu adalah dokumen teks dan ekstensi yang disukai adalah . .txt.

Detail penting adalah itu Anda sebaiknya menelepon showSaveFilePicker() langsung sebagai respons terhadap isyarat pengguna (misalnya, mengklik tombol "Simpan") dan jangan menundanya saat Anda sedang melakukan pemrosesan berat. Jika Anda melakukan semua pekerjaan pendahuluan dan kemudian, dengan penundaan, mencoba membuka dialog, browser mungkin akan menampilkan kesalahan keamanan karena tidak lagi menganggap bahwa Anda "menangani isyarat pengguna."

Setelah Anda memiliki FileSystemFileHandle dengan menunjuk ke file tempat Anda ingin menyimpan, Langkah selanjutnya adalah membuat sebuah FileSystemWritableFileStream menggunakan fileHandle.createWritable()Stream ini adalah yang akan Anda gunakan untuk menulis data. Jika browser mendeteksi bahwa Anda belum memiliki izin tulis, browser akan menampilkan dialog izin; jika pengguna menolaknya, panggilan tersebut akan melempar pengecualian.

Dengan aliran air di tangan, Anda cukup menelepon writable.write(contenido) dengan seutas benang, sebuah Blob, atau sebuah BufferSourceAnda bahkan dapat langsung menyalurkan isi respons HTTP ke dalam aliran data dengan response.body.pipeTo(writable)Setelah selesai mengetik, Anda menutup transmisi dengan writable.close(), yaitu saat perubahan dikonsolidasikan di disk.

Saat aliran data terbuka, Anda juga dapat menggunakan metode seperti seek() o truncate() ayat Pindahkan penunjuk tulis ke posisi tertentu atau ubah ukuran file.Namun penting untuk diingat bahwa perubahan tersebut tidak diterapkan secara permanen sampai siaran ditutup.

Sarankan nama file dan folder beranda kepada pengguna.

API ini juga menangani pengalaman pengguna dalam kotak dialog sistem. Misalnya, Anda dapat menentukan nama file yang disarankan saat Anda memanggil showSaveFilePicker()Hal ini memungkinkan pengguna untuk melihat sesuatu yang lebih deskriptif, seperti "Dokumen Baru.txt," alih-alih "Tanpa Judul" yang umum.

Demikian juga, Kita dapat menyarankan folder awal tempat pemilih file dimulai.Hal ini dilakukan dengan meneruskan sebuah properti. startIn saat Anda menelepon showSaveFilePicker(), showOpenFilePicker() o showDirectoryPicker()Nilainya bisa berupa string seperti desktop, documents, downloads, music, pictures o videos, yang sesuai dengan lokasi sistem standar.

Juga, Anda memiliki pilihan untuk gunakan sebagai nilai dari startIn pengelola file atau direktori yang sudah Anda milikiDalam hal ini, kotak dialog akan terbuka langsung di folder tempat handle tersebut berada, yang sangat memudahkan untuk melanjutkan konteks kerja dari sesi terakhir.

Jika aplikasi Anda menangani berbagai jenis file (misalnya, dokumen teks dan gambar yang disematkan), Anda dapat menentukan ID yang berbeda untuk setiap jenis kotak dialog.Dengan cara ini, browser akan mengingat folder terakhir yang digunakan secara independen untuk setiap ID, dan Anda tidak akan mencampuradukkan jalur dokumen dengan jalur gambar.

Ingat file dan folder terbaru dengan IndexedDB.

Salah satu keunggulan File System Access adalah handler-nya dapat diserialisasi. Ini berarti Anda dapat menyimpan FileSystemFileHandle y FileSystemDirectoryHandle di IndexedDB dan mengambilnya kembali di sesi berikutnya, selalu dengan tetap memperhatikan kebijakan izin.

Berkat hal ini, aplikasi web dapat menawarkan fungsionalitas desktop pada umumnya, seperti: daftar file terbaru, membuka kembali proyek terakhir, atau memulihkan folder kerja sebelumnyaAnda hanya perlu menyimpan handle tersebut di database browser dan membacanya saat aplikasi dimulai.

Saat Anda mengambil handle yang tersimpan, Jangan berasumsi bahwa izin tersebut akan tetap berlaku.Browser mungkin memutuskan bahwa otorisasi perlu diminta lagi, misalnya, karena waktu telah berlalu atau tab terakhir dari sumber tersebut telah ditutup. Oleh karena itu, disarankan agar kode Anda memeriksa situasi ini.

Untuk pemeriksaan ini, API tersebut mencakup metode-metode berikut: queryPermission() y requestPermission() baik dalam penanganan file maupun direktoriPertama, Anda perlu menanyakan status izin tersebut, dan jika statusnya bukan "diberikan", Anda dapat memintanya kembali dari pengguna, dengan menunjukkan pada opsi apakah Anda hanya memerlukan izin baca atau baca dan tulis.

Praktik yang baik adalah Menggabungkan kedua langkah tersebut menjadi satu fungsi bantuan. Dengan diberikan handle dan mode (hanya baca atau baca/tulis), program harus memeriksa apakah izin sudah diberikan dan, jika belum, menampilkan prompt yang sesuai. Hal ini mengurangi jumlah dialog dan membuat pengalaman pengguna lebih lancar.

Buka dan telusuri seluruh direktori dari browser.

Selain file individual, API ini memungkinkan untuk bekerja dengan seluruh folder. dengan showDirectoryPicker() Pengguna dapat memilih direktori lengkap.dan aplikasi tersebut menerima FileSystemDirectoryHandle yang memberikan akses ke semua elemennya.

Secara default, Anda akan memiliki izin baca pada file-file di direktori tersebut, meskipun jika Anda perlu menulis ke file-file tersebut juga Anda dapat meminta akses baca dan tulis dengan cara memberikan { mode: 'readwrite' } saat menelepon showDirectoryPicker()Mulai saat itu, aplikasi Anda dapat menampilkan dan memanipulasi konten sesuai dengan izin yang diberikan.

Untuk menavigasi folder tersebut, Anda dapat melakukan iterasi secara asinkron atas dirHandle.values()yang mengembalikan, satu per satu, elemen-elemen yang dikandungnya: file dan subdirektori. Setiap entri memiliki properti kind yang memberi tahu Anda apakah itu "file" atau "directory".

Jika Anda perlu mengakses informasi tentang setiap file, seperti ukurannya, Anda dapat memanggilnya. entry.getFile(). Dalam kasus ini, disarankan untuk menjalankan pembacaan secara paralel menggunakan Promise.all() atau teknik serupa, alih-alih melakukannya satu per satu secara berurutan, yang bisa lebih lambat.

Anda juga dapat melakukan ini dari direktori. membuat folder atau file baru dengan getDirectoryHandle() y getFileHandle()Anda dapat menentukan di opsi apakah Anda ingin file tersebut dibuat jika belum ada. Misalnya, Anda dapat mengatur struktur proyek seperti "Proyek Saya / Kode / Catatan.txt" langsung dari aplikasi web.

Kelola file: hapus, ganti nama, dan pindahkan

API ini tidak terbatas pada membaca dan menulis saja. Ini juga memungkinkan Anda untuk menghapus file dan folder dari direktori menggunakan removeEntry() lebih dari a FileSystemDirectoryHandleJika itu adalah folder, Anda dapat membuat penghapusan bersifat rekursif, sehingga mencakup semua subfolder dan file di dalamnya.

Jika Anda ingin bertindak langsung pada handle file atau folder alih-alih menelusuri direktori, Beberapa browser menawarkan metode ini. remove() en FileSystemFileHandle y FileSystemDirectoryHandleDengan cara ini, Anda dapat menghapus elemen tersebut tanpa perlu menyebutkan namanya di dalam direktori induk.

Untuk operasi pengorganisasian seperti mengganti nama atau memindahkan item ke folder lain, Ada sebuah metode. move() di antarmuka FileSystemHandleAnda dapat langsung memberikan nama baru, direktori tujuan, atau direktori beserta nama baru untuk memindahkan dan mengganti nama secara bersamaan.

Namun, ada beberapa nuansa terkait kompatibilitas: dukungan dari move() Ini lebih matang untuk file di dalam sistem file pribadi sumber (OPFS).dan mungkin masih tersembunyi atau belum diimplementasikan untuk semua skenario atau untuk direktori di browser tertentu.

Seret dan lepas file dan folder ke web.

API Akses Sistem Berkas terintegrasi dengan sangat baik dengan sistem seret dan lepas HTML. Saat pengguna menyeret file atau folder dari sistem operasi ke halaman web.Browser membuat elemen-elemen tersebut. DataTransferItem rekanan.

Melalui metode DataTransferItem.getAsFileSystemHandle(), Anda bisa mendapatkan FileSystemFileHandle apakah elemen tersebut berupa file atau FileSystemDirectoryHandle jika itu adalah direktoriDengan demikian, sebuah aplikasi dapat memungkinkan pengguna untuk menyeret dan meletakkan seluruh folder foto dan langsung mengedit isinya.

Anda perlu ingat bahwa, dalam konteks seret dan lepas (drag and drop), DataTransferItem.kind Untuk file dan folder, istilah yang digunakan akan selalu "file".Anda akan mendapatkan perbedaan antara file dan direktori dengan melihat propertinya. kind itu FileSystemHandle yang memberikan kembali kepada Anda getAsFileSystemHandle()yang akan membedakan antara "file" y "directory".

Sistem Berkas Sumber Pribadi (OPFS) dan akses yang dioptimalkan

Selain akses ke file dan folder pengguna, browser Chromium menawarkan sistem file pribadi asal (OPFS)Ini adalah ruang penyimpanan yang dikhususkan untuk setiap situs web, dan tidak dapat diakses langsung oleh pengguna dari sistem operasi.

Dalam praktiknya, hal ini berarti bahwa Meskipun browser menyimpan data ini secara internal di disk, pengguna tidak akan menemukannya sebagai file "biasa" di folder mana pun.Ini bisa berupa basis data, file yang dikemas, atau struktur internal apa pun yang dianggap sesuai oleh peramban.

Melalui API, Anda dapat mengakses root dari sistem privat ini menggunakan navigator.storage.getDirectory(), yang mengembalikan sebuah FileSystemDirectoryHandle. Dari situ Anda dapat membuat file dan direktori, membacanya, menulis ke dalamnya, mengganti namanya, atau menghapusnya seolah-olah itu adalah elemen dari sistem file lokal.Namun, perlu diketahui bahwa mereka terisolasi dan dikhususkan secara eksklusif untuk aplikasi web Anda.

Untuk kebutuhan performa yang lebih canggih, Chromium menggabungkan jenis file khusus dengan akses sinkron yang dioptimalkan.. Melalui fileHandle.createSyncAccessHandle() (tersedia di pekerja), Anda bisa mendapatkan pegangan yang memungkinkan pembacaan dan penulisan sinkron dan eksklusif, yang berguna untuk kasus penggunaan yang sangat intensif atau sensitif terhadap latensi.

Mendapatkan handle masih bersifat asinkron, tetapi begitu Anda memilikinya, Operasi baca dan tulis dilakukan sebagai panggilan langsung, dengan memanipulasi buffer byte.Ini sangat mendekati performa aplikasi native, tetapi tanpa meninggalkan lingkungan web dan tetap menjaga isolasi dari sistem sumber privat.

Polyfill dan alternatif ketika tidak ada dukungan bawaan.

Meskipun API Akses Sistem Berkas menawarkan banyak kemungkinan, Tidak semua browser mendukungnya.Tidak mungkin membuat polyfill lengkap yang mereplikasi semua kemampuannya, terutama karena tidak ada cara untuk mensimulasikan akses sistem file asli secara andal tanpa kerja sama dari browser itu sendiri.

Namun, beberapa bagian dapat didekati. Untuk meniru showOpenFilePicker() sederhana <input type="file">yang menampilkan kotak pemilihan file dan memungkinkan pengguna untuk memilih satu atau lebih file.

Hal serupa terjadi saat menyimpan. Untuk meniru showSaveFilePicker() tautan sering digunakan <a download="nombre"> Mengklik tombol tersebut akan memulai pengunduhan Blob yang dihasilkan dari JavaScript. Ini memungkinkan Anda untuk "menyimpan" data yang dihasilkan oleh situs web, meskipun tidak menawarkan opsi untuk menimpa file yang sudah ada.

Mengenai pemilihan seluruh direktori, atribut non-standar secara tradisional telah digunakan webkitdirectory en <input type="file">yang memungkinkan Anda memilih folder dan menerima daftar file yang terdapat di dalamnya. Ini bukan solusi universal dan tidak sekuat showDirectoryPicker()tetapi ini mencakup beberapa kasus.

Untuk menyatukan pendekatan-pendekatan ini, Ada toko buku seperti akses-fs-browser Mereka berusaha menggunakan API modern kapan pun tersedia, dan jika tidak, mereka secara otomatis beralih ke alternatif yang lebih baik ini.Dengan cara ini, pengembang menulis kode yang relatif seragam dan pustaka akan menangani adaptasi terhadap lingkungan tersebut.

Keamanan, izin, dan kontrol pengguna

Semua kekuatan ini datang dengan tanggung jawab, dan tim pengembang browser sangat menyadari hal ini. Desain API Akses Sistem Berkas berlandaskan pada dua prinsip: kendali pengguna dan transparansi.Tidak mungkin sebuah situs web dapat secara diam-diam membaca setengah dari hard drive.

Saat pengguna membuka file menggunakan kotak pilihan (baik untuk membaca atau menyimpan file baru), Isyarat itulah yang memberikan izin baca atau tulis pada file atau folder tertentu.Jika pengguna berubah pikiran dan membatalkan dialog, situs web tidak menerima apa pun dan oleh karena itu tidak mendapatkan akses apa pun.

Untuk menyimpan file baru, klik kotak “Simpan”. Ini tidak hanya memungkinkan Anda untuk memilih nama dan jalur, tetapi juga berfungsi sebagai pemberian izin tulis pada file yang baru dibuat tersebut.Logikanya sama dengan yang telah digunakan selama bertahun-tahun pada elemen-elemen seperti... <input type="file">tetapi diperluas dengan lebih banyak kemampuan.

Ketika sebuah aplikasi web ingin memodifikasi file yang sudah ada, Hal itu tidak bisa dilakukan begitu saja; browser mungkin akan menampilkan pemberitahuan khusus yang meminta izin untuk menulis ke perangkat tersebut.Dialog ini hanya dapat dibuka sebagai respons terhadap tindakan pengguna, seperti menekan tombol "Simpan perubahan".

Jika pengguna memutuskan untuk tidak memberikan izin tulis tersebut, Situs web tersebut harus menawarkan beberapa alternatif: mengunduh salinan, menyimpan ke cloud, bekerja di OPFS, atau mekanisme serupa lainnya.Ide dasarnya adalah pengguna selalu memiliki hak untuk menentukan apa yang diubah pada sistem lokal mereka.

Dari segi transparansi, Browser menampilkan ikon di bilah alamat ketika sebuah situs web memiliki akses ke file lokal.Jika pengguna mengklik ikon tersebut, mereka akan melihat daftar file atau folder yang dapat diakses oleh halaman tersebut saat itu dan dapat mencabut izin kapan pun mereka mau.

Izin tersebut tidak bersifat permanen. Secara umum, sebuah halaman tetap dapat menyimpan file hanya selama setidaknya satu tab dari sumber tersebut terbuka.Setelah semuanya ditutup, browser mungkin menganggap sesi telah berakhir dan, pada penggunaan berikutnya, perlu meminta izin lagi untuk file atau direktori tersebut.

Dengan menggabungkan skema file:/// untuk membuka sumber daya tertentu, pintasan keyboard untuk mengunggah file lokal dan API Akses Sistem File untuk integrasi mendalam. Hal ini menjadikan browser sebagai alat yang jauh lebih serbaguna bagi pengguna dan pengembang.Memungkinkan Anda untuk dengan cepat melihat video yang tersimpan di disk atau mengedit seluruh proyek tanpa meninggalkan lingkungan web.