File System Access API memungkinkan aplikasi web membaca atau menyimpan perubahan secara langsung ke file dan folder di perangkat pengguna.
Apa itu File System Access API?
File System Access API (sebelumnya dikenal sebagai Native File System API dan sebelumnya disebut Writeable Files API) memungkinkan developer membuat aplikasi web canggih yang dapat berinteraksi dengan file di perangkat lokal pengguna, seperti IDE, editor foto dan video, editor teks, dan banyak lagi. Setelah pengguna memberikan akses aplikasi web, API ini memungkinkan mereka membaca atau menyimpan perubahan secara langsung pada file dan folder di perangkat pengguna. Selain membaca dan menulis file, File System Access API memberikan kemampuan untuk membuka direktori dan menghitung kontennya.
Jika Anda pernah bekerja membaca dan menulis file sebelumnya, sebagian besar yang akan saya bagikan sudah tidak asing lagi bagi Anda. Saya mendorong Anda untuk tetap membacanya, karena tidak semua sistem itu sama.
File System Access API saat ini didukung di sebagian besar browser Chromium di Windows, macOS, ChromeOS, dan Linux. Pengecualian yang signifikan adalah Brave, yang saat ini hanya tersedia di belakang flag. Android mendukung bagian sistem file pribadi origin dari API mulai Chromium 109. Saat ini tidak ada rencana untuk metode pemilih, tetapi Anda dapat melacak potensi progres dengan membintangi crbug.com/1011535.
Menggunakan File System Access API
Untuk memamerkan kecanggihan dan kegunaan File System Access API, saya menulis satu file editor teks. Dengan cara ini, Anda dapat membuka file teks, mengeditnya, menyimpan perubahan kembali ke disk, atau memulai file baru dan menyimpan perubahan ke disk. Cara ini tidaklah rumit, tetapi dapat membantu Anda memahami konsep-konsep ini.
Dukungan browser
Coba
Lihat cara kerja File System Access API di demo editor teks.
Membaca file dari sistem file lokal
Kasus penggunaan pertama yang ingin saya atasi adalah meminta pengguna memilih file, lalu membuka dan membaca file tersebut dari disk.
Minta pengguna memilih file untuk dibaca
Titik entri ke File System Access API adalah
window.showOpenFilePicker()
. Saat dipanggil, kotak dialog pemilih file akan ditampilkan
dan meminta pengguna untuk memilih file. Setelah memilih file, API akan menampilkan array handle file. Parameter options
opsional memungkinkan Anda memengaruhi perilaku pemilih file, misalnya, dengan memungkinkan pengguna memilih beberapa file, atau direktori, atau jenis file yang berbeda.
Tanpa opsi yang ditentukan, pemilih file memungkinkan pengguna memilih satu file. Ini cocok
untuk editor teks.
Seperti banyak API canggih lainnya, memanggil showOpenFilePicker()
harus dilakukan dalam konteks
aman, dan harus dipanggil dari dalam gestur pengguna.
let fileHandle;
butOpenFile.addEventListener('click', async () => {
// Destructure the one-element array.
[fileHandle] = await window.showOpenFilePicker();
// Do something with the file handle.
});
Setelah pengguna memilih file, showOpenFilePicker()
akan menampilkan array tuas, dalam hal ini array
satu elemen dengan satu FileSystemFileHandle
yang berisi properti dan
metode yang diperlukan untuk berinteraksi dengan file tersebut.
Sebaiknya simpan referensi ke handle file sehingga dapat digunakan nanti. Anda harus menyimpan perubahan pada file, atau melakukan operasi file lainnya.
Membaca file dari sistem file
Setelah memiliki handle ke file, Anda bisa mendapatkan properti file, atau mengakses file itu sendiri.
Untuk saat ini, saya hanya akan
membaca isinya. Memanggil handle.getFile()
akan menampilkan objek File
, yang berisi blob. Untuk mendapatkan data dari blob, panggil salah satu metodenya, (slice()
,
stream()
,
text()
, atau
arrayBuffer()
).
const file = await fileHandle.getFile();
const contents = await file.text();
Objek File
yang ditampilkan oleh FileSystemFileHandle.getFile()
hanya dapat dibaca selama
file dasar pada disk tidak berubah. Jika file pada disk diubah, objek File
menjadi
tidak dapat dibaca dan Anda harus memanggil getFile()
lagi untuk mendapatkan objek File
baru agar dapat membaca data
yang diubah.
Penutup
Saat pengguna mengklik tombol Buka, browser akan menampilkan pemilih file. Setelah mereka memilih file, aplikasi
akan membaca konten dan menempatkannya ke dalam <textarea>
.
let fileHandle;
butOpenFile.addEventListener('click', async () => {
[fileHandle] = await window.showOpenFilePicker();
const file = await fileHandle.getFile();
const contents = await file.text();
textArea.value = contents;
});
Menulis file ke sistem file lokal
Di editor teks, ada dua cara untuk menyimpan file: Save dan Save As. Opsi Save hanya menulis perubahan ke file asli menggunakan handle file yang diambil sebelumnya. Namun, Save As akan membuat file baru, sehingga memerlukan handle file baru.
Membuat file baru
Untuk menyimpan file, panggil showSaveFilePicker()
, yang menunjukkan pemilih file
dalam mode "simpan", yang memungkinkan pengguna memilih file baru yang ingin mereka gunakan untuk disimpan. Untuk editor teks, saya juga ingin menambahkan ekstensi .txt
secara otomatis, jadi saya memberikan beberapa parameter tambahan.
async function getNewFileHandle() {
const options = {
types: [
{
description: 'Text Files',
accept: {
'text/plain': ['.txt'],
},
},
],
};
const handle = await window.showSaveFilePicker(options);
return handle;
}
Simpan perubahan ke disk
Anda dapat menemukan semua kode untuk menyimpan perubahan ke file dalam demo editor teks saya di
GitHub. Interaksi sistem file inti terdapat di
fs-helpers.js
. Paling sederhana, proses terlihat seperti kode di bawah ini.
Saya akan memandu setiap
langkah dan menjelaskannya.
// fileHandle is an instance of FileSystemFileHandle..
async function writeFile(fileHandle, contents) {
// Create a FileSystemWritableFileStream to write to.
const writable = await fileHandle.createWritable();
// Write the contents of the file to the stream.
await writable.write(contents);
// Close the file and write the contents to disk.
await writable.close();
}
Menulis data ke disk menggunakan objek FileSystemWritableFileStream
, subclass
dari WritableStream
. Buat aliran data dengan memanggil createWritable()
pada objek nama sebutan channel file. Saat createWritable()
dipanggil, browser akan memeriksa terlebih dahulu apakah pengguna telah memberikan
izin tulis ke file atau belum. Jika izin untuk menulis belum diberikan, browser akan meminta
izin kepada pengguna. Jika izin tidak diberikan, createWritable()
akan menampilkan
DOMException
, dan aplikasi tidak akan dapat menulis ke file. Di editor teks, objek
DOMException
ditangani dalam metode saveFile()
.
Metode write()
mengambil string, yang diperlukan untuk editor teks. Namun, metode ini juga dapat mengambil
BufferSource, atau Blob. Misalnya, Anda dapat melakukan pipe stream langsung ke
data tersebut:
async function writeURLToFile(fileHandle, url) {
// Create a FileSystemWritableFileStream to write to.
const writable = await fileHandle.createWritable();
// Make an HTTP request for the contents.
const response = await fetch(url);
// Stream the response into the file.
await response.body.pipeTo(writable);
// pipeTo() closes the destination pipe by default, no need to close it.
}
Anda juga dapat seek()
, atau truncate()
dalam aliran data untuk memperbarui
file di posisi tertentu, atau mengubah ukuran file.
Menentukan nama file yang disarankan dan memulai direktori
Dalam banyak kasus, Anda mungkin ingin aplikasi menyarankan nama file atau lokasi default. Misalnya, editor
teks mungkin ingin menyarankan nama file default Untitled Text.txt
, bukan Untitled
. Anda dapat melakukannya dengan meneruskan properti suggestedName
sebagai bagian dari opsi showSaveFilePicker
.
const fileHandle = await self.showSaveFilePicker({
suggestedName: 'Untitled Text.txt',
types: [{
description: 'Text documents',
accept: {
'text/plain': ['.txt'],
},
}],
});
Hal yang sama berlaku untuk direktori {i>default<i}. Jika Anda membangun editor teks, Anda mungkin ingin
memulai dialog penyimpanan file atau membuka file di folder documents
default, sedangkan untuk editor
gambar, mungkin ingin memulai dari folder pictures
default. Anda dapat menyarankan direktori awal default dengan meneruskan properti startIn
ke metode showSaveFilePicker
, showDirectoryPicker()
, atau showOpenFilePicker
, seperti itu.
const fileHandle = await self.showOpenFilePicker({
startIn: 'pictures'
});
Daftar direktori sistem yang terkenal adalah:
desktop
: Direktori desktop pengguna, jika ada.documents
: Direktori tempat dokumen yang dibuat oleh pengguna biasanya akan disimpan.downloads
: Direktori tempat file yang didownload biasanya akan disimpan.music
: Direktori tempat file audio biasanya akan disimpan.pictures
: Direktori tempat foto dan gambar diam lainnya biasanya akan disimpan.videos
: Direktori tempat video/film biasanya disimpan.
Selain direktori sistem yang sudah dikenal dengan baik, Anda juga dapat meneruskan nama file atau direktori yang sudah ada sebagai
nilai untuk startIn
. Dialog kemudian akan terbuka di direktori yang sama.
// Assume `directoryHandle` is a handle to a previously opened directory.
const fileHandle = await self.showOpenFilePicker({
startIn: directoryHandle
});
Menentukan tujuan berbagai pemilih file
Terkadang aplikasi memiliki pemilih yang berbeda untuk tujuan yang berbeda. Misalnya, editor rich text
dapat mengizinkan pengguna untuk membuka file teks, tetapi juga mengimpor gambar. Secara default, setiap pemilih file
akan terbuka di lokasi yang terakhir diingat. Anda dapat mengakalinya dengan menyimpan nilai id
untuk setiap jenis pemilih. Jika id
ditentukan, implementasi alat pilih file akan mengingat
direktori terpisah yang terakhir digunakan untuk id
tersebut.
const fileHandle1 = await self.showSaveFilePicker({
id: 'openText',
});
const fileHandle2 = await self.showSaveFilePicker({
id: 'importImage',
});
Menyimpan handle file atau handle direktori di IndexedDB
Tuas file dan tuas direktori dapat diserialisasi, yang berarti Anda dapat menyimpan file atau
handle direktori ke IndexedDB, atau memanggil postMessage()
untuk mengirimnya di antara origin level
atas yang sama.
Menyimpan handle direktori atau file ke IndexedDB berarti Anda dapat menyimpan status, atau mengingat file atau direktori mana yang sedang dikerjakan pengguna. Hal ini memungkinkan Anda menyimpan daftar file yang baru saja dibuka atau diedit, penawaran untuk membuka kembali file terakhir saat aplikasi dibuka, memulihkan direktori kerja sebelumnya, dan banyak lagi. Di editor teks, saya menyimpan daftar lima file terbaru yang dibuka pengguna, sehingga memudahkan akses kembali file tersebut.
Contoh kode di bawah ini menunjukkan penyimpanan dan pengambilan handle file dan handle direktori. Anda dapat melihat cara kerjanya di Glitch. (Saya menggunakan library idb-keyval agar lebih singkat.)
import { get, set } from 'https://unpkg.com/idb-keyval@5.0.2/dist/esm/index.js';
const pre1 = document.querySelector('pre.file');
const pre2 = document.querySelector('pre.directory');
const button1 = document.querySelector('button.file');
const button2 = document.querySelector('button.directory');
// File handle
button1.addEventListener('click', async () => {
try {
const fileHandleOrUndefined = await get('file');
if (fileHandleOrUndefined) {
pre1.textContent = `Retrieved file handle "${fileHandleOrUndefined.name}" from IndexedDB.`;
return;
}
const [fileHandle] = await window.showOpenFilePicker();
await set('file', fileHandle);
pre1.textContent = `Stored file handle for "${fileHandle.name}" in IndexedDB.`;
} catch (error) {
alert(error.name, error.message);
}
});
// Directory handle
button2.addEventListener('click', async () => {
try {
const directoryHandleOrUndefined = await get('directory');
if (directoryHandleOrUndefined) {
pre2.textContent = `Retrieved directroy handle "${directoryHandleOrUndefined.name}" from IndexedDB.`;
return;
}
const directoryHandle = await window.showDirectoryPicker();
await set('directory', directoryHandle);
pre2.textContent = `Stored directory handle for "${directoryHandle.name}" in IndexedDB.`;
} catch (error) {
alert(error.name, error.message);
}
});
Penanganan dan izin file atau direktori yang tersimpan
Karena izin saat ini tidak dipertahankan di antara sesi, Anda harus memverifikasi apakah pengguna
telah memberikan izin ke file atau direktori menggunakan queryPermission()
. Jika belum, panggil requestPermission()
untuk memintanya (kembali). Cara ini berfungsi sama untuk handle file dan direktori. Anda
harus menjalankan fileOrDirectoryHandle.requestPermission(descriptor)
atau
fileOrDirectoryHandle.queryPermission(descriptor)
masing-masing.
Di editor teks, saya membuat metode verifyPermission()
yang memeriksa apakah pengguna sudah
memberikan izin, dan jika diperlukan, membuat permintaan.
async function verifyPermission(fileHandle, readWrite) {
const options = {};
if (readWrite) {
options.mode = 'readwrite';
}
// Check if permission was already granted. If so, return true.
if ((await fileHandle.queryPermission(options)) === 'granted') {
return true;
}
// Request permission. If the user grants permission, return true.
if ((await fileHandle.requestPermission(options)) === 'granted') {
return true;
}
// The user didn't grant permission, so return false.
return false;
}
Dengan meminta izin tulis melalui permintaan baca, saya mengurangi jumlah permintaan izin; pengguna melihat satu perintah saat membuka file, dan memberikan izin untuk membaca dan menulis file.
Membuka direktori dan menghitung isinya
Untuk menghitung semua file dalam direktori, panggil showDirectoryPicker()
. Pengguna
memilih direktori di pemilih, setelah itu FileSystemDirectoryHandle
akan ditampilkan, yang memungkinkan Anda menghitung dan mengakses file direktori. Secara default, Anda akan memiliki akses
baca ke file dalam direktori, tetapi jika memerlukan akses tulis, Anda dapat meneruskan
{ mode: 'readwrite' }
ke metode tersebut.
const butDir = document.getElementById('butDirectory');
butDir.addEventListener('click', async () => {
const dirHandle = await window.showDirectoryPicker();
for await (const entry of dirHandle.values()) {
console.log(entry.kind, entry.name);
}
});
Jika Anda juga perlu mengakses setiap file melalui getFile()
, misalnya untuk mendapatkan ukuran file individual,
jangan gunakan await
pada setiap hasil secara berurutan, melainkan proses semua file
secara paralel, misalnya, melalui Promise.all()
.
const butDir = document.getElementById('butDirectory');
butDir.addEventListener('click', async () => {
const dirHandle = await window.showDirectoryPicker();
const promises = [];
for await (const entry of dirHandle.values()) {
if (entry.kind !== 'file') {
continue;
}
promises.push(entry.getFile().then((file) => `${file.name} (${file.size})`));
}
console.log(await Promise.all(promises));
});
Membuat atau mengakses file dan folder di dalam direktori
Dari direktori, Anda dapat membuat atau mengakses file dan folder menggunakan
getFileHandle()
atau masing-masing metode
getDirectoryHandle()
. Dengan meneruskan objek options
opsional dengan kunci create
dan nilai boolean true
atau false
, Anda dapat menentukan apakah file atau folder baru harus dibuat jika tidak ada.
// In an existing directory, create a new directory named "My Documents".
const newDirectoryHandle = await existingDirectoryHandle.getDirectoryHandle('My Documents', {
create: true,
});
// In this new directory, create a file named "My Notes.txt".
const newFileHandle = await newDirectoryHandle.getFileHandle('My Notes.txt', { create: true });
Menyelesaikan jalur item dalam direktori
Saat menangani file atau folder di direktori, sebaiknya Anda me-resolve jalur item
yang dipermasalahkan. Hal ini dapat dilakukan dengan metode resolve()
yang diberi nama tepat. Untuk me-resolve, item dapat berupa turunan langsung atau tidak langsung dari direktori.
// Resolve the path of the previously created file called "My Notes.txt".
const path = await newDirectoryHandle.resolve(newFileHandle);
// `path` is now ["My Documents", "My Notes.txt"]
Menghapus file dan folder dalam direktori
Jika telah memperoleh akses ke direktori, Anda dapat menghapus file dan folder yang ada di dalamnya dengan
metode removeEntry()
. Untuk folder, penghapusan dapat bersifat berulang dan mencakup
semua subfolder serta file yang terdapat di dalamnya.
// Delete a file.
await directoryHandle.removeEntry('Abandoned Projects.txt');
// Recursively delete a folder.
await directoryHandle.removeEntry('Old Stuff', { recursive: true });
Menghapus file atau folder secara langsung
Jika Anda memiliki akses ke nama file atau direktori, panggil remove()
pada FileSystemFileHandle
atau FileSystemDirectoryHandle
untuk menghapusnya.
// Delete a file.
await fileHandle.remove();
// Delete a directory.
await directoryHandle.remove();
Mengganti nama serta memindahkan file dan folder
File dan folder dapat diganti namanya atau dipindahkan ke lokasi baru dengan memanggil move()
pada antarmuka FileSystemHandle
. FileSystemHandle
memiliki antarmuka turunan FileSystemFileHandle
dan
FileSystemDirectoryHandle
. Metode move()
menggunakan satu atau dua parameter. Yang pertama dapat
berupa string dengan nama baru atau FileSystemDirectoryHandle
ke folder tujuan. Pada
kasus selanjutnya, parameter kedua opsional adalah string dengan nama baru, sehingga pemindahan dan penggantian nama dapat
terjadi dalam satu langkah.
// Rename the file.
await file.move('new_name');
// Move the file to a new directory.
await file.move(directory);
// Move the file to a new directory and rename it.
await file.move(directory, 'newer_name');
Integrasi tarik lalu lepas
Dengan
Antarmuka Tarik lalu Lepas HTML
memungkinkan aplikasi web menerima
file yang ditarik lalu dilepaskan
di halaman web. Selama operasi tarik lalu lepas, item file dan direktori yang ditarik masing-masing dikaitkan
dengan entri file dan entri direktori. Metode DataTransferItem.getAsFileSystemHandle()
menampilkan promise dengan objek FileSystemFileHandle
jika item yang ditarik adalah file, dan promise dengan objek FileSystemDirectoryHandle
jika item yang ditarik adalah direktori. Listingan di bawah ini menunjukkan penerapannya. Perhatikan bahwa antarmuka Tarik lalu Lepas
DataTransferItem.kind
adalah
"file"
untuk file dan file, sedangkan FileSystemHandle.kind
dari File System Access API
adalah "file"
untuk file dan "directory"
untuk direktori.
elem.addEventListener('dragover', (e) => {
// Prevent navigation.
e.preventDefault();
});
elem.addEventListener('drop', async (e) => {
e.preventDefault();
const fileHandlesPromises = [...e.dataTransfer.items]
.filter((item) => item.kind === 'file')
.map((item) => item.getAsFileSystemHandle());
for await (const handle of fileHandlesPromises) {
if (handle.kind === 'directory') {
console.log(`Directory: ${handle.name}`);
} else {
console.log(`File: ${handle.name}`);
}
}
});
Mengakses sistem file pribadi origin
Sistem file pribadi origin adalah endpoint penyimpanan yang, seperti namanya, bersifat pribadi untuk
asal halaman. Meskipun browser biasanya menerapkannya dengan mempertahankan konten
sistem file pribadi origin ini ke disk suatu tempat, hal ini tidak dimaksudkan agar konten mudah
diakses pengguna. Demikian pula, tidak ada harapan bahwa file atau direktori dengan nama yang cocok
dengan nama turunan sistem file pribadi asal. Meskipun browser mungkin membuatnya tampak
ada file, secara internal—karena ini adalah sistem file pribadi origin—browser mungkin menyimpan "file" ini dalam database atau struktur data lainnya. Pada dasarnya, jika Anda menggunakan API ini,
jangan berharap file yang dibuat cocok satu per satu di suatu tempat pada hard disk. Anda dapat beroperasi seperti biasa pada
sistem file pribadi origin setelah memiliki akses ke root FileSystemDirectoryHandle
.
const root = await navigator.storage.getDirectory();
// Create a new file handle.
const fileHandle = await root.getFileHandle('Untitled.txt', { create: true });
// Create a new directory handle.
const dirHandle = await root.getDirectoryHandle('New Folder', { create: true });
// Recursively remove a directory.
await root.removeEntry('Old Stuff', { recursive: true });
Mengakses file yang dioptimalkan untuk performa dari sistem file pribadi origin
Sistem file pribadi origin menyediakan akses opsional ke jenis file khusus yang sangat
dioptimalkan untuk performa, misalnya, dengan menawarkan akses tulis langsung dan eksklusif ke
konten file. Di Chromium 102 dan yang lebih baru, ada metode tambahan pada sistem file pribadi origin untuk
menyederhanakan akses file: createSyncAccessHandle()
(untuk operasi baca dan tulis sinkron).
Aktivitas ini diekspos di FileSystemFileHandle
, tetapi secara eksklusif di
Pekerja Web.
// (Read and write operations are synchronous,
// but obtaining the handle is asynchronous.)
// Synchronous access exclusively in Worker contexts.
const accessHandle = await fileHandle.createSyncAccessHandle();
const writtenBytes = accessHandle.write(buffer);
const readBytes = accessHandle.read(buffer, { at: 1 });
Pengisian ulang poliester
Anda tidak dapat mem-polyfill sepenuhnya metode File System Access API.
- Metode
showOpenFilePicker()
dapat diperkirakan dengan elemen<input type="file">
. - Metode
showSaveFilePicker()
dapat disimulasikan dengan elemen<a download="file_name">
, meskipun hal ini memicu download terprogram dan tidak memungkinkan untuk menimpa file yang ada. - Metode
showDirectoryPicker()
dapat diemulasikan dengan elemen<input type="file" webkitdirectory>
non-standar.
Kami telah mengembangkan library bernama browser-fs-access yang menggunakan File System Access API jika memungkinkan dan yang akan melakukan fallback ke opsi terbaik berikutnya dalam semua kasus lainnya.
Keamanan dan izin
Tim Chrome telah merancang dan menerapkan File System Access API menggunakan prinsip inti yang ditetapkan dalam Mengontrol Akses ke Fitur Platform Web yang Canggih, termasuk kontrol dan transparansi pengguna, serta ergonomi pengguna.
Membuka file atau menyimpan file baru
![Pemilih file untuk membuka file yang akan dibaca](https://developer.chrome.com/static/docs/capabilities/web-apis/file-system-access/image/file-picker-open-file-8cb5f6783ee89.jpg?authuser=7&hl=id)
Saat membuka file, pengguna memberikan izin untuk membaca file atau direktori melalui pemilih file.
Pemilih file yang terbuka hanya dapat ditampilkan melalui gestur pengguna saat ditayangkan dari konteks
aman. Jika pengguna berubah pikiran, mereka dapat membatalkan pilihan di alat pilih
file dan situs tidak mendapatkan akses ke apa pun. Perilaku ini sama dengan
elemen <input type="file">
.
![Pemilih file untuk menyimpan file ke disk.](https://developer.chrome.com/static/docs/capabilities/web-apis/file-system-access/image/file-picker-save-file-bd54ae001799a.jpg?authuser=7&hl=id)
Demikian pula, saat aplikasi web ingin menyimpan file baru, browser akan menampilkan pemilih simpan file, sehingga pengguna dapat menetapkan nama dan lokasi file baru. Karena pengguna menyimpan file baru ke perangkat (bukan menimpa file yang sudah ada), pemilih file akan memberikan izin kepada aplikasi untuk menulis ke file tersebut.
Folder yang dibatasi
Untuk membantu melindungi pengguna dan data mereka, browser dapat membatasi kemampuan pengguna untuk menyimpan ke folder tertentu, misalnya, folder sistem operasi inti seperti Windows, folder Library macOS, dll. Jika hal ini terjadi, browser akan menampilkan perintah dan meminta pengguna untuk memilih folder lain.
Memodifikasi file atau direktori yang sudah ada
Aplikasi web tidak dapat mengubah file di disk tanpa mendapatkan izin eksplisit dari pengguna.
Dialog izin
Jika seseorang ingin menyimpan perubahan ke file yang sebelumnya mereka beri akses baca, browser akan menampilkan permintaan izin, yang meminta izin agar situs dapat menulis perubahan ke disk. Permintaan izin hanya dapat dipicu oleh gestur pengguna, misalnya, dengan mengklik tombol Simpan.
![Permintaan izin yang ditampilkan sebelum menyimpan file.](https://developer.chrome.com/static/docs/capabilities/web-apis/file-system-access/image/permission-prompt-shown-p-823d180f97ad5.png?authuser=7&hl=id)
Atau, aplikasi web yang mengedit beberapa file, seperti IDE, juga dapat meminta izin untuk menyimpan perubahan pada saat dibuka.
Jika pengguna memilih Cancel, dan tidak memberikan akses tulis, aplikasi web tidak dapat menyimpan perubahan ke file lokal. Ini harus menyediakan metode alternatif bagi pengguna untuk menyimpan data, misalnya dengan menyediakan cara untuk "mendownload" file, menyimpan data ke cloud, dll.
Transparansi
![Ikon Omnibox](https://developer.chrome.com/static/docs/capabilities/web-apis/file-system-access/image/omnibox-icon-5797e9a831603.jpg?authuser=7&hl=id)
Setelah pengguna memberikan izin ke aplikasi web untuk menyimpan file lokal, browser akan menampilkan ikon di kolom URL. Mengklik ikon tersebut akan membuka pop-over yang menampilkan daftar file yang telah diakses oleh pengguna. Pengguna dapat dengan mudah mencabut akses tersebut jika mau.
Persistensi izin
Aplikasi web dapat terus menyimpan perubahan ke file tanpa meminta hingga semua tab untuk asalnya ditutup. Setelah tab ditutup, situs akan kehilangan semua akses. Saat berikutnya pengguna menggunakan aplikasi web, mereka akan diminta kembali untuk mengakses file.
Masukan
Kami ingin mengetahui pengalaman Anda saat menggunakan File System Access API.
Beri tahu kami tentang desain API
Apakah ada sesuatu tentang API yang tidak berfungsi seperti yang Anda harapkan? Atau apakah ada metode atau properti yang hilang yang Anda butuhkan untuk menerapkan ide Anda? Punya pertanyaan atau komentar tentang model keamanan?
- Laporkan masalah spesifikasi di repo GitHub Akses Sistem File WiCG, atau tambahkan pendapat Anda ke masalah yang sudah ada.
Ada masalah dengan penerapan?
Apakah Anda menemukan bug pada implementasi Chrome? Atau apakah implementasinya berbeda dari spesifikasi?
- Laporkan bug di https://new.crbug.com. Pastikan untuk menyertakan detail sebanyak mungkin,
petunjuk sederhana untuk mereproduksi, dan setel Komponen ke
Blink>Storage>FileSystem
. Glitch berfungsi dengan baik untuk berbagi repro yang cepat dan mudah.
Berencana menggunakan API?
Berencana menggunakan File System Access API di situs Anda? Dukungan publik Anda membantu kami memprioritaskan fitur, dan menunjukkan kepada vendor browser lain betapa pentingnya mendukung fitur tersebut.
- Bagikan rencana Anda untuk menggunakannya di rangkaian pesan Discourse WiCG.
- Kirim tweet ke @ChromiumDev menggunakan hashtag
#FileSystemAccess
dan beri tahu kami tempat dan cara Anda menggunakannya.
Link bermanfaat
- Penjelasan untuk umum
- Spesifikasi Akses Sistem File & Spesifikasi file
- Bug pelacakan
- Entri ChromeStatus.com
- Definisi TypeScript
- File System Access API - Model Keamanan Chromium
- Komponen Blink:
Blink>Storage>FileSystem
Ucapan terima kasih
Spesifikasi File System Access API ditulis oleh Marijin Kruisselbrink.