File System Access API memungkinkan aplikasi web membaca atau menyimpan perubahan langsung ke file dan folder di perangkat pengguna
Dipublikasikan pada Selasa, 20 Agustus 2019 • Diperbarui pada Kamis, 12 Januari 2023
Pete LePage
Pete adalah Pengacara Pengembang
Situs web Twitter GitHub Kesalahan Mastodon
Thomas Steiner
Tom adalah Advokat Pengembang
Situs web Twitter GitHub Kesalahan Mastodon
Daftar Isi
Apa itu API Akses Sistem File?
File System Access API (sebelumnya dikenal sebagai Native File System API dan sebelumnya disebut Writeable Files API) memungkinkan pengembang membangun aplikasi web canggih yang berinteraksi dengan file di perangkat lokal pengguna, seperti IDE, editor foto dan video, . Setelah pengguna memberikan akses aplikasi web, API ini memungkinkan mereka membaca atau menyimpan perubahan langsung ke file dan folder di perangkat pengguna. Selain membaca dan menulis file, File System Access API menyediakan kemampuan untuk membuka direktori dan menghitung isinya
File System Access API—walaupun namanya serupa—berbeda dari antarmuka let fileHandle;
butOpenFile.addEventListener('click', async () => {
[fileHandle] = await window.showOpenFilePicker();
const file = await fileHandle.getFile();
const contents = await file.text();
textArea.value = contents;
});2 yang diekspos oleh , yang mendokumentasikan jenis dan operasi yang disediakan oleh browser untuk skrip ketika hierarki file dan direktori diseret dan dilepaskan ke halaman atau dipilih menggunakan
Ini juga berbeda dari File API yang sudah tidak digunakan lagi. Direktori dan Spesifikasi sistem, yang mendefinisikan API untuk menavigasi hierarki sistem file dan sarana yang digunakan browser untuk mengekspos bagian kotak pasir dari sistem file lokal pengguna ke aplikasi web
Jika Anda pernah bekerja dengan membaca dan menulis file sebelumnya, sebagian besar dari apa yang akan saya bagikan akan Anda kenal. Saya mendorong Anda untuk tetap membacanya, karena tidak semua sistem sama
Kami telah banyak memikirkan desain dan implementasi File System Access API untuk memastikan bahwa orang dapat mengelola file mereka dengan mudah. Lihat bagian untuk informasi lebih lanjut
File System Access API saat ini didukung di sebagian besar browser Chromium di Windows, macOS, ChromeOS, dan Linux. Pengecualian penting adalah Berani di mana saat ini hanya tersedia di belakang bendera. Android mendukung bagian sistem file pribadi asal dari API mulai dari Chromium 109. Saat ini tidak ada rencana untuk metode picker, tetapi Anda dapat melacak kemajuan potensial dengan membintangi crbug. com/1011535
Menggunakan API Akses Sistem File
Untuk memamerkan kekuatan dan kegunaan API Akses Sistem File, saya menulis editor teks file tunggal. Ini memungkinkan Anda membuka file teks, mengeditnya, menyimpan perubahan kembali ke disk, atau memulai file baru dan menyimpan perubahan ke disk. Tidak ada yang mewah, tetapi menyediakan cukup untuk membantu Anda memahami konsepnya
Cobalah
Lihat API Akses Sistem File beraksi di demo editor teks
Baca file dari sistem file lokal
Kasus penggunaan pertama yang ingin saya tangani adalah meminta pengguna untuk memilih file, lalu membuka dan membaca file tersebut dari disk
Minta pengguna untuk memilih file untuk dibaca
Titik masuk ke File System Access API adalah. Saat dipanggil, ini menampilkan kotak dialog pemilih file, dan meminta pengguna untuk memilih file. Setelah mereka memilih file, API mengembalikan larik pegangan file. Parameter let fileHandle;
butOpenFile.addEventListener('click', async () => {
[fileHandle] = await window.showOpenFilePicker();
const file = await fileHandle.getFile();
const contents = await file.text();
textArea.value = contents;
});_4 opsional memungkinkan Anda memengaruhi perilaku pemilih file, misalnya, dengan mengizinkan pengguna memilih banyak file, atau direktori, atau jenis file yang berbeda. Tanpa opsi apa pun yang ditentukan, pemilih file memungkinkan pengguna untuk memilih satu file. Ini sempurna untuk editor teks
Seperti banyak API canggih lainnya, pemanggilan let fileHandle;
butOpenFile.addEventListener('click', async () => {
[fileHandle] = await window.showOpenFilePicker();
const file = await fileHandle.getFile();
const contents = await file.text();
textArea.value = contents;
});5 harus dilakukan dalam konteks yang aman, dan harus dipanggil dari dalam isyarat pengguna
butOpenFile.addEventListener('click', async () => {
// Destructure the one-element array.
[fileHandle] = await window.showOpenFilePicker();
// Do something with the file handle.
});
Setelah pengguna memilih file, let fileHandle;
butOpenFile.addEventListener('click', async () => {
[fileHandle] = await window.showOpenFilePicker();
const file = await fileHandle.getFile();
const contents = await file.text();
textArea.value = contents;
});5 mengembalikan array pegangan, dalam hal ini array satu elemen dengan yang berisi properti dan metode yang diperlukan untuk berinteraksi dengan file
Sangat membantu untuk menyimpan referensi ke pegangan file sehingga dapat digunakan nanti. Ini diperlukan untuk menyimpan perubahan pada file, atau untuk melakukan operasi file lainnya
Membaca file dari sistem file
Sekarang Anda memiliki pegangan untuk file, Anda bisa mendapatkan properti file, atau mengakses file itu sendiri. Untuk saat ini, saya hanya akan membaca isinya. Memanggil let fileHandle;
butOpenFile.addEventListener('click', async () => {
[fileHandle] = await window.showOpenFilePicker();
const file = await fileHandle.getFile();
const contents = await file.text();
textArea.value = contents;
});_8 mengembalikan objek let fileHandle;
butOpenFile.addEventListener('click', async () => {
[fileHandle] = await window.showOpenFilePicker();
const file = await fileHandle.getFile();
const contents = await file.text();
textArea.value = contents;
});9, yang berisi gumpalan. Untuk mendapatkan data dari blob, panggil salah satu metodenya, (async function getNewFileHandle() {
const options = {
types: [
{
description: 'Text Files',
accept: {
'text/plain': ['.txt'],
},
},
],
};
const handle = await window.showSaveFilePicker(options);
return handle;
}0, async function getNewFileHandle() {
const options = {
types: [
{
description: 'Text Files',
accept: {
'text/plain': ['.txt'],
},
},
],
};
const handle = await window.showSaveFilePicker(options);
return handle;
}1, async function getNewFileHandle() {
const options = {
types: [
{
description: 'Text Files',
accept: {
'text/plain': ['.txt'],
},
},
],
};
const handle = await window.showSaveFilePicker(options);
return handle;
}2, atau async function getNewFileHandle() {
const options = {
types: [
{
description: 'Text Files',
accept: {
'text/plain': ['.txt'],
},
},
],
};
const handle = await window.showSaveFilePicker(options);
return handle;
}3)
const contents = await file.text();
Untuk sebagian besar kasus penggunaan, Anda dapat membaca file secara berurutan dengan metode async function getNewFileHandle() {
const options = {
types: [
{
description: 'Text Files',
accept: {
'text/plain': ['.txt'],
},
},
],
};
const handle = await window.showSaveFilePicker(options);
return handle;
}1, async function getNewFileHandle() {
const options = {
types: [
{
description: 'Text Files',
accept: {
'text/plain': ['.txt'],
},
},
],
};
const handle = await window.showSaveFilePicker(options);
return handle;
}2, atau async function getNewFileHandle() {
const options = {
types: [
{
description: 'Text Files',
accept: {
'text/plain': ['.txt'],
},
},
],
};
const handle = await window.showSaveFilePicker(options);
return handle;
}3. Untuk mendapatkan akses acak ke konten file, gunakan metode async function getNewFileHandle() {
const options = {
types: [
{
description: 'Text Files',
accept: {
'text/plain': ['.txt'],
},
},
],
};
const handle = await window.showSaveFilePicker(options);
return handle;
}0
Objek let fileHandle;
butOpenFile.addEventListener('click', async () => {
[fileHandle] = await window.showOpenFilePicker();
const file = await fileHandle.getFile();
const contents = await file.text();
textArea.value = contents;
});9 dikembalikan oleh async function getNewFileHandle() {
const options = {
types: [
{
description: 'Text Files',
accept: {
'text/plain': ['.txt'],
},
},
],
};
const handle = await window.showSaveFilePicker(options);
return handle;
}9 hanya dapat dibaca selama file yang mendasari pada disk tidak berubah. Jika file pada disk diubah, objek let fileHandle;
butOpenFile.addEventListener('click', async () => {
[fileHandle] = await window.showOpenFilePicker();
const file = await fileHandle.getFile();
const contents = await file.text();
textArea.value = contents;
});_9 menjadi tidak dapat dibaca dan Anda harus memanggil // 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();
}1 lagi untuk mendapatkan objek let fileHandle;
butOpenFile.addEventListener('click', async () => {
[fileHandle] = await window.showOpenFilePicker();
const file = await fileHandle.getFile();
const contents = await file.text();
textArea.value = contents;
});9 baru untuk membaca data yang diubah
Menyatukan semuanya
Saat pengguna mengklik tombol Buka, browser menampilkan pemilih file. Setelah mereka memilih file, aplikasi membaca konten dan memasukkannya ke dalam // 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();
}3
butOpenFile.addEventListener('click', async () => {
[fileHandle] = await window.showOpenFilePicker();
const file = await fileHandle.getFile();
const contents = await file.text();
textArea.value = contents;
});
Tulis file ke sistem file lokal
Di editor teks, ada dua cara untuk menyimpan file. Simpan, dan Simpan Sebagai. Simpan cukup tulis perubahan kembali ke file asli menggunakan pegangan file yang diambil sebelumnya. Tapi Save As membuat file baru, dan karenanya membutuhkan pegangan file baru
Buat berkas baru
Untuk menyimpan file, panggil , yang menampilkan pemilih file dalam mode "simpan", memungkinkan pengguna untuk memilih file baru yang ingin mereka gunakan untuk menyimpan. Untuk editor teks, saya juga ingin menambahkan ekstensi // 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();
}5 secara otomatis, jadi saya memberikan beberapa parameter tambahan
const options = {
types: [
{
description: 'Text Files',
accept: {
'text/plain': ['.txt'],
},
},
],
};
const handle = await window.showSaveFilePicker(options);
return handle;
}
Gotcha
Terkadang pemrosesan data yang akan disimpan memerlukan waktu beberapa saat setelah pengguna mengklik tombol Simpan di aplikasi Anda. Gotcha yang umum adalah melakukan pekerjaan ini sebelum kode // 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();
}4 dijalankan, menghasilkan // 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();
}7. Alih-alih, dapatkan pegangan file terlebih dahulu, dan hanya setelah mendapatkan pegangan file, mulailah memproses data
Simpan perubahan ke disk
Anda dapat menemukan semua kode untuk menyimpan perubahan ke file di demo editor teks saya di GitHub. Interaksi sistem file inti ada di // 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();
}8. Paling sederhana, prosesnya terlihat seperti kode di bawah ini. Saya akan berjalan melalui setiap langkah dan menjelaskannya
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, subkelas dari ________ 29 ______ 0. Buat aliran dengan memanggil 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.
}_1 pada objek pegangan file. Saat 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.
}_1 dipanggil, browser terlebih dahulu memeriksa apakah pengguna telah memberikan izin menulis ke file. Jika izin untuk menulis belum diberikan, browser akan meminta izin kepada pengguna. Jika izin tidak diberikan, 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.
}1 melempar 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.
}4, dan aplikasi tidak akan dapat menulis ke file. Di editor teks, objek 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.
}_4 ditangani dalam metode 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.
}6
Metode 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.
}_7 mengambil string, yang diperlukan untuk editor teks. Tapi itu juga bisa menggunakan BufferSource, atau Blob. Misalnya, Anda dapat menyalurkan aliran langsung ke sana
// 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 , atau di dalam aliran untuk memperbarui file pada posisi tertentu, atau mengubah ukuran file
Hati-hati
Perubahan tidak ditulis ke disk hingga aliran ditutup, baik dengan memanggil const fileHandle = await self.showSaveFilePicker({
suggestedName: 'Untitled Text.txt',
types: [{
description: 'Text documents',
accept: {
'text/plain': ['.txt'],
},
}],
});0 atau saat aliran ditutup secara otomatis oleh pipa
Menentukan nama file yang disarankan dan memulai direktori
Dalam banyak kasus, Anda mungkin ingin aplikasi menyarankan nama atau lokasi file default. Misalnya, editor teks mungkin ingin menyarankan nama file default const fileHandle = await self.showSaveFilePicker({
suggestedName: 'Untitled Text.txt',
types: [{
description: 'Text documents',
accept: {
'text/plain': ['.txt'],
},
}],
});1 daripada const fileHandle = await self.showSaveFilePicker({
suggestedName: 'Untitled Text.txt',
types: [{
description: 'Text documents',
accept: {
'text/plain': ['.txt'],
},
}],
});2. Anda dapat mencapainya dengan meneruskan properti const fileHandle = await self.showSaveFilePicker({
suggestedName: 'Untitled Text.txt',
types: [{
description: 'Text documents',
accept: {
'text/plain': ['.txt'],
},
}],
});3 sebagai bagian dari opsi const fileHandle = await self.showSaveFilePicker({
suggestedName: 'Untitled Text.txt',
types: [{
description: 'Text documents',
accept: {
'text/plain': ['.txt'],
},
}],
});4
suggestedName: 'Untitled Text.txt',
types: [{
description: 'Text documents',
accept: {
'text/plain': ['.txt'],
},
}],
});
Hal yang sama berlaku untuk direktori awal default. Jika Anda membuat editor teks, Anda mungkin ingin memulai penyimpanan file atau dialog buka file di folder const fileHandle = await self.showSaveFilePicker({
suggestedName: 'Untitled Text.txt',
types: [{
description: 'Text documents',
accept: {
'text/plain': ['.txt'],
},
}],
});5 default, sedangkan untuk editor gambar, mungkin ingin memulai di folder const fileHandle = await self.showSaveFilePicker({
suggestedName: 'Untitled Text.txt',
types: [{
description: 'Text documents',
accept: {
'text/plain': ['.txt'],
},
}],
});6 default. Anda dapat menyarankan direktori awal default dengan meneruskan properti const fileHandle = await self.showSaveFilePicker({
suggestedName: 'Untitled Text.txt',
types: [{
description: 'Text documents',
accept: {
'text/plain': ['.txt'],
},
}],
});7 ke metode const fileHandle = await self.showSaveFilePicker({
suggestedName: 'Untitled Text.txt',
types: [{
description: 'Text documents',
accept: {
'text/plain': ['.txt'],
},
}],
});4, const fileHandle = await self.showSaveFilePicker({
suggestedName: 'Untitled Text.txt',
types: [{
description: 'Text documents',
accept: {
'text/plain': ['.txt'],
},
}],
});9, atau const fileHandle = await self.showOpenFilePicker({
startIn: 'pictures'
});0 seperti itu
startIn: 'pictures'
});
Daftar direktori sistem yang terkenal adalah
- const fileHandle = await self.showOpenFilePicker({
startIn: 'pictures'
});_1. Direktori desktop pengguna, jika ada - const fileHandle = await self.showSaveFilePicker({
suggestedName: 'Untitled Text.txt',
types: [{
description: 'Text documents',
accept: {
'text/plain': ['.txt'],
},
}],
});5. Direktori tempat dokumen yang dibuat oleh pengguna biasanya akan disimpan - const fileHandle = await self.showOpenFilePicker({
startIn: 'pictures'
});_3. Direktori tempat file unduhan biasanya disimpan - const fileHandle = await self.showOpenFilePicker({
startIn: 'pictures'
});_4. Direktori tempat file audio biasanya disimpan - const fileHandle = await self.showSaveFilePicker({
suggestedName: 'Untitled Text.txt',
types: [{
description: 'Text documents',
accept: {
'text/plain': ['.txt'],
},
}],
});6. Direktori tempat foto dan gambar diam lainnya biasanya disimpan - const fileHandle = await self.showOpenFilePicker({
startIn: 'pictures'
});_6. Direktori tempat video/film biasanya disimpan
Terlepas dari direktori sistem yang terkenal, Anda juga dapat meneruskan file atau pegangan direktori yang ada sebagai nilai untuk const fileHandle = await self.showSaveFilePicker({
suggestedName: 'Untitled Text.txt',
types: [{
description: 'Text documents',
accept: {
'text/plain': ['.txt'],
},
}],
});7. Dialog kemudian akan terbuka di direktori yang sama
const fileHandle = await self.showOpenFilePicker({
startIn: directoryHandle
});
Menentukan tujuan pemetik file yang berbeda
Terkadang aplikasi memiliki pemetik yang berbeda untuk tujuan yang berbeda. Misalnya, editor teks kaya memungkinkan pengguna untuk membuka file teks, tetapi juga untuk mengimpor gambar. Secara default, setiap pemilih file akan dibuka di lokasi yang terakhir diingat. Anda dapat menghindari ini dengan menyimpan const fileHandle = await self.showOpenFilePicker({
startIn: 'pictures'
});_8 nilai untuk setiap jenis pemilih. Jika const fileHandle = await self.showOpenFilePicker({
startIn: 'pictures'
});8 ditentukan, implementasi pemilih file mengingat direktori terakhir yang digunakan terpisah untuk const fileHandle = await self.showOpenFilePicker({
startIn: 'pictures'
});8 itu
id: 'openText',
});
const fileHandle2 = await self.showSaveFilePicker({
id: 'importImage',
});
Menyimpan pegangan file atau pegangan direktori di IndexedDB
Pegangan file dan pegangan direktori adalah serializable, yang berarti bahwa Anda dapat menyimpan file atau pegangan direktori ke IndexedDB, atau memanggil // Assume `directoryHandle` is a handle to a previously opened directory.
const fileHandle = await self.showOpenFilePicker({
startIn: directoryHandle
});1 untuk mengirimkannya antara asal tingkat atas yang sama
Menyimpan pegangan file atau direktori ke IndexedDB berarti Anda dapat menyimpan status, atau mengingat file atau direktori mana yang sedang dikerjakan pengguna. Ini memungkinkan untuk menyimpan daftar file yang baru dibuka atau diedit, menawarkan untuk membuka kembali file terakhir saat aplikasi dibuka, mengembalikan direktori kerja sebelumnya, dan banyak lagi. Di editor teks, saya menyimpan daftar lima file terbaru yang dibuka pengguna, sehingga memudahkan untuk mengakses kembali file tersebut
Contoh kode di bawah ini menunjukkan penyimpanan dan pengambilan pegangan file dan pegangan direktori. Anda dapat melihat ini beraksi di Glitch. (Saya menggunakan perpustakaan idb-keyval untuk singkatnya. )
const file = await fileHandle.getFile();const contents = await file.text();_0
Pegangan dan izin file atau direktori yang disimpan
Karena izin saat ini tidak bertahan di antara sesi, Anda harus memverifikasi apakah pengguna telah memberikan izin ke file atau direktori menggunakan // Assume `directoryHandle` is a handle to a previously opened directory.
const fileHandle = await self.showOpenFilePicker({
startIn: directoryHandle
});2. Jika belum, hubungi // Assume `directoryHandle` is a handle to a previously opened directory.
const fileHandle = await self.showOpenFilePicker({
startIn: directoryHandle
});_3 untuk (kembali) memintanya. Ini berfungsi sama untuk pegangan file dan direktori. Anda harus menjalankan // Assume `directoryHandle` is a handle to a previously opened directory.
const fileHandle = await self.showOpenFilePicker({
startIn: directoryHandle
});_4 atau // Assume `directoryHandle` is a handle to a previously opened directory.
const fileHandle = await self.showOpenFilePicker({
startIn: directoryHandle
});5 masing-masing
Di editor teks, saya membuat metode // Assume `directoryHandle` is a handle to a previously opened directory.
const fileHandle = await self.showOpenFilePicker({
startIn: directoryHandle
});6 yang memeriksa apakah pengguna telah memberikan izin, dan jika diperlukan, membuat permintaan
const contents = await file.text();_1
Dengan meminta izin menulis dengan permintaan baca, saya mengurangi jumlah permintaan izin;
Sementara // Assume `directoryHandle` is a handle to a previously opened directory.
const fileHandle = await self.showOpenFilePicker({
startIn: directoryHandle
});_7 objek dapat , izin saat ini perlu diberikan kembali setiap kali, yang kurang optimal. Keripik bintang. com/1011533 untuk diberi tahu tentang upaya mempertahankan izin yang diberikan
Membuka direktori dan menghitung isinya
Untuk menghitung semua file dalam direktori, panggil. Pengguna memilih direktori di picker, setelah a dikembalikan, yang memungkinkan Anda menghitung dan mengakses file direktori. Secara default, Anda akan memiliki akses baca ke file dalam direktori, tetapi jika Anda memerlukan akses tulis, Anda dapat meneruskan const fileHandle1 = await self.showSaveFilePicker({
id: 'openText',
});
const fileHandle2 = await self.showSaveFilePicker({
id: 'importImage',
});0 ke metode
const contents = await file.text();_2
Jika Anda juga perlu mengakses setiap file melalui // 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();
}1 untuk, misalnya, mendapatkan ukuran file individual, jangan gunakan const fileHandle1 = await self.showSaveFilePicker({
id: 'openText',
});
const fileHandle2 = await self.showSaveFilePicker({
id: 'importImage',
});2 pada setiap hasil secara berurutan, melainkan proses semua file secara paralel, misalnya, melalui const fileHandle1 = await self.showSaveFilePicker({
id: 'openText',
});
const fileHandle2 = await self.showSaveFilePicker({
id: 'importImage',
});3
const contents = await file.text();_3
Membuat atau mengakses file dan folder dalam direktori
Dari direktori, Anda dapat membuat atau mengakses file dan folder menggunakan metode atau masing-masing. Dengan mengirimkan objek let fileHandle;
butOpenFile.addEventListener('click', async () => {
[fileHandle] = await window.showOpenFilePicker();
const file = await fileHandle.getFile();
const contents = await file.text();
textArea.value = contents;
});4 opsional dengan kunci const fileHandle1 = await self.showSaveFilePicker({
id: 'openText',
});
const fileHandle2 = await self.showSaveFilePicker({
id: 'importImage',
});_7 dan nilai boolean const fileHandle1 = await self.showSaveFilePicker({
id: 'openText',
});
const fileHandle2 = await self.showSaveFilePicker({
id: 'importImage',
});8 atau const fileHandle1 = await self.showSaveFilePicker({
id: 'openText',
});
const fileHandle2 = await self.showSaveFilePicker({
id: 'importImage',
});9, Anda dapat menentukan apakah file atau folder baru harus dibuat jika tidak ada
const contents = await file.text();_4
Menyelesaikan jalur item dalam direktori
Saat bekerja dengan file atau folder dalam direktori, akan berguna untuk menyelesaikan jalur item yang dimaksud. Ini dapat dilakukan dengan metode bernama tepat. Untuk penyelesaian, item dapat berupa anak langsung atau tidak langsung dari direktori
const file = await fileHandle.getFile();const contents = await file.text();_5
Menghapus file dan folder dalam direktori
Jika Anda telah memperoleh akses ke direktori, Anda dapat menghapus file dan folder yang ada di dalamnya dengan metode ini. Untuk folder, penghapusan secara opsional dapat bersifat rekursif dan menyertakan semua subfolder dan file yang ada di dalamnya
const file = await fileHandle.getFile();const contents = await file.text();_6
Menghapus file atau folder secara langsung
Jika Anda memiliki akses ke pegangan file atau direktori, hubungi const file = await fileHandle.getFile();
const contents = await file.text();02 pada let fileHandle;
butOpenFile.addEventListener('click', async () => {
[fileHandle] = await window.showOpenFilePicker();
const file = await fileHandle.getFile();
const contents = await file.text();
textArea.value = contents;
});7 atau // Assume `directoryHandle` is a handle to a previously opened directory.
const fileHandle = await self.showOpenFilePicker({
startIn: directoryHandle
});9 untuk menghapusnya
const contents = await file.text();_7
Metode const file = await fileHandle.getFile();
const contents = await file.text();_05 saat ini berada di belakang bendera
Mengganti nama dan memindahkan file dan folder
File dan folder dapat diganti namanya atau dipindahkan ke lokasi baru dengan memanggil const file = await fileHandle.getFile();
const contents = await file.text();06 pada antarmuka // Assume `directoryHandle` is a handle to a previously opened directory.
const fileHandle = await self.showOpenFilePicker({
startIn: directoryHandle
});7. // Assume `directoryHandle` is a handle to a previously opened directory.
const fileHandle = await self.showOpenFilePicker({
startIn: directoryHandle
});7 memiliki antarmuka anak let fileHandle;
butOpenFile.addEventListener('click', async () => {
[fileHandle] = await window.showOpenFilePicker();
const file = await fileHandle.getFile();
const contents = await file.text();
textArea.value = contents;
});7 dan // Assume `directoryHandle` is a handle to a previously opened directory.
const fileHandle = await self.showOpenFilePicker({
startIn: directoryHandle
});9. Metode const file = await fileHandle.getFile();
const contents = await file.text();_06 membutuhkan satu atau dua parameter. Yang pertama bisa berupa string dengan nama baru atau // Assume `directoryHandle` is a handle to a previously opened directory.
const fileHandle = await self.showOpenFilePicker({
startIn: directoryHandle
});9 ke folder tujuan. Dalam kasus terakhir, parameter opsional kedua adalah string dengan nama baru, sehingga pemindahan dan penggantian nama dapat dilakukan dalam satu langkah
const contents = await file.text();_8
Metode const file = await fileHandle.getFile();
const contents = await file.text();_13 telah dikirimkan untuk file dalam sistem file pribadi asal (OPFS), berada di belakang tanda untuk file jika sumber atau tujuan berada di luar OPFS, dan belum didukung untuk direktori
Integrasi seret dan lepas
Antarmuka Seret dan Jatuhkan HTML memungkinkan aplikasi web untuk menerima file yang diseret dan dijatuhkan di halaman web. Selama operasi seret dan lepas, file yang diseret dan item direktori masing-masing dikaitkan dengan entri file dan entri direktori. Metode const file = await fileHandle.getFile();
const contents = await file.text();_14 mengembalikan janji dengan objek let fileHandle;
butOpenFile.addEventListener('click', async () => {
[fileHandle] = await window.showOpenFilePicker();
const file = await fileHandle.getFile();
const contents = await file.text();
textArea.value = contents;
});7 jika item yang diseret adalah file, dan janji dengan objek // Assume `directoryHandle` is a handle to a previously opened directory.
const fileHandle = await self.showOpenFilePicker({
startIn: directoryHandle
});9 jika item yang diseret adalah direktori. Daftar di bawah ini menunjukkan ini dalam tindakan. Perhatikan bahwa antarmuka Seret dan Lepas const file = await fileHandle.getFile();
const contents = await file.text();17 adalah const file = await fileHandle.getFile();
const contents = await file.text();18 untuk file dan direktori, sedangkan File System Access API adalah const file = await fileHandle.getFile();
const contents = await file.text();18 untuk file dan const file = await fileHandle.getFile();
const contents = await file.text();21 untuk direktori
const contents = await file.text();_9
Mengakses sistem file pribadi asal
Sistem file pribadi asal adalah titik akhir penyimpanan yang, seperti namanya, bersifat pribadi untuk asal halaman. Sementara browser biasanya mengimplementasikan ini dengan mempertahankan konten dari sistem file pribadi asal ini ke disk di suatu tempat, itu tidak dimaksudkan agar konten mudah diakses pengguna. Demikian pula, tidak ada harapan bahwa ada file atau direktori dengan nama yang cocok dengan nama turunan dari sistem file privat asal. Meskipun browser mungkin membuatnya tampak seperti ada file, secara internal—karena ini adalah sistem file pribadi asal—browser mungkin menyimpan "file" ini dalam database atau struktur data lainnya. Pada dasarnya, jika Anda menggunakan API ini, jangan berharap menemukan file yang dibuat cocok satu-ke-satu di suatu tempat di hard disk. Anda dapat beroperasi seperti biasa pada sistem file pribadi asal setelah Anda memiliki akses ke root // Assume `directoryHandle` is a handle to a previously opened directory.
const fileHandle = await self.showOpenFilePicker({
startIn: directoryHandle
});9
butOpenFile.addEventListener('click', async () => {
[fileHandle] = await window.showOpenFilePicker();
const file = await fileHandle.getFile();
const contents = await file.text();
textArea.value = contents;
});0
Mengakses file yang dioptimalkan untuk kinerja dari sistem file pribadi asal
Sistem file pribadi asal menyediakan akses opsional ke jenis file khusus yang sangat dioptimalkan untuk kinerja, misalnya, dengan menawarkan akses tulis di tempat dan eksklusif ke konten file. Di Chromium 102 dan yang lebih baru, ada metode tambahan pada sistem file pribadi asal untuk menyederhanakan akses file. const file = await fileHandle.getFile();
const contents = await file.text();_23 (untuk operasi baca dan tulis sinkron). Itu diekspos pada let fileHandle;
butOpenFile.addEventListener('click', async () => {
[fileHandle] = await window.showOpenFilePicker();
const file = await fileHandle.getFile();
const contents = await file.text();
textArea.value = contents;
});_7, tetapi secara eksklusif di Pekerja Web
butOpenFile.addEventListener('click', async () => {
[fileHandle] = await window.showOpenFilePicker();
const file = await fileHandle.getFile();
const contents = await file.text();
textArea.value = contents;
});_1
Orang-orang yang tertarik dengan metode const file = await fileHandle.getFile();
const contents = await file.text();_25 (yaitu, varian asinkron yang tersedia di utas utama dan di Pekerja Web) harus melacak crbug. com/1323922
Polifilling
Tidak mungkin untuk sepenuhnya mengisi ulang metode File System Access API
- Metode let fileHandle;
butOpenFile.addEventListener('click', async () => {
[fileHandle] = await window.showOpenFilePicker();
const file = await fileHandle.getFile();
const contents = await file.text();
textArea.value = contents;
});5 dapat didekati dengan elemen const file = await fileHandle.getFile();
const contents = await file.text();27 - Metode // 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();
}_4 dapat disimulasikan dengan elemen const file = await fileHandle.getFile();
const contents = await file.text();29, meskipun ini memicu unduhan terprogram dan tidak memungkinkan untuk menimpa file yang ada - Metode const fileHandle = await self.showSaveFilePicker({
suggestedName: 'Untitled Text.txt',
types: [{
description: 'Text documents',
accept: {
'text/plain': ['.txt'],
},
}],
});_9 dapat ditiru dengan elemen const file = await fileHandle.getFile();
const contents = await file.text();31 non-standar
Kami telah mengembangkan perpustakaan yang disebut browser-fs-access yang menggunakan File System Access API sedapat mungkin dan kembali ke opsi terbaik berikut ini dalam semua kasus lainnya
Keamanan dan izin
Tim Chrome telah merancang dan menerapkan API Akses Sistem File menggunakan prinsip inti yang ditentukan dalam Mengontrol Akses ke Fitur Platform Web yang Kuat, termasuk kontrol dan transparansi pengguna, dan ergonomi pengguna
Membuka file atau menyimpan file baru
Saat membuka file, pengguna memberikan izin untuk membaca file atau direktori melalui pemilih file. Pemilih file yang terbuka hanya dapat ditampilkan melalui gerakan pengguna saat disajikan dari konteks yang aman. Jika pengguna berubah pikiran, mereka dapat membatalkan pilihan di pemilih file dan situs tidak mendapatkan akses ke apa pun. Ini adalah perilaku yang sama dengan elemen ________11______27
Demikian pula, saat aplikasi web ingin menyimpan file baru, browser menampilkan pemilih penyimpanan file, yang memungkinkan pengguna untuk menentukan nama dan lokasi file baru. Karena mereka menyimpan file baru ke perangkat (versus menimpa file yang sudah ada), pemilih file memberikan izin aplikasi untuk menulis ke file
Folder yang dibatasi
Untuk membantu melindungi pengguna dan datanya, browser mungkin membatasi kemampuan pengguna untuk menyimpan ke folder tertentu, misalnya folder sistem operasi inti seperti Windows, folder macOS Library, dll. Ketika ini terjadi, browser akan menampilkan prompt dan meminta pengguna untuk memilih folder lain
Memodifikasi file atau direktori yang ada
Aplikasi web tidak dapat memodifikasi file di disk tanpa mendapatkan izin eksplisit dari pengguna
Permintaan izin
Jika seseorang ingin menyimpan perubahan ke file yang sebelumnya mereka beri akses baca, browser menampilkan prompt izin, meminta izin situs untuk menulis perubahan ke disk. Permintaan izin hanya dapat dipicu oleh gerakan pengguna, misalnya dengan mengklik tombol Simpan
Alternatifnya, aplikasi web yang mengedit banyak file, seperti IDE, juga dapat meminta izin untuk menyimpan perubahan pada saat dibuka
Jika pengguna memilih Batalkan, dan tidak memberikan akses tulis, aplikasi web tidak dapat menyimpan perubahan ke file lokal. Ini harus menyediakan metode alternatif bagi pengguna untuk menyimpan datanya, misalnya dengan menyediakan cara untuk "mengunduh" file, menyimpan data ke cloud, dll.
Transparansi
Setelah pengguna memberikan izin ke aplikasi web untuk menyimpan file lokal, browser menampilkan ikon di bilah URL. Mengklik ikon membuka pop-over yang menampilkan daftar file yang telah diberikan akses oleh pengguna. Pengguna dapat dengan mudah mencabut akses itu jika mereka mau
Persistensi izin
Aplikasi web dapat terus menyimpan perubahan ke file tanpa diminta hingga semua tab asalnya ditutup. Setelah tab ditutup, situs kehilangan semua akses. Lain kali pengguna menggunakan aplikasi web, mereka akan diminta kembali untuk mengakses file
Masukan
Kami ingin mendengar tentang pengalaman Anda dengan File System Access API
Beri tahu kami tentang desain API
Apakah ada sesuatu tentang API yang tidak berfungsi seperti yang Anda harapkan?
- Ajukan masalah spesifikasi pada repo GitHub Akses Sistem File WICG, atau tambahkan pemikiran Anda ke masalah yang ada
Masalah dengan implementasinya?
Apakah Anda menemukan bug dengan penerapan Chrome?
- Ajukan bug di https. //baru. crbug. com. Pastikan untuk menyertakan detail sebanyak mungkin, instruksi sederhana untuk mereproduksi, dan atur Komponen ke const file = await fileHandle.getFile();
const contents = await file.text();33. Glitch berfungsi dengan baik untuk berbagi repro yang cepat dan mudah
Berencana menggunakan API?
Berencana menggunakan File System Access API di situs Anda?