File System Access API: yerel dosyalara erişimi kolaylaştırma

File System Access API, web uygulamalarının değişiklikleri doğrudan kullanıcının cihazındaki dosyalar ve klasörlerde okumasına veya kaydetmesine olanak tanır.

Pete LePage
Thomas Steiner

File System Access API nedir?

File System Access API, geliştiricilerin Kullanıcının yerel cihazındaki IDE'ler, fotoğraf ve video düzenleyiciler, metin düzenleyiciler vb. dosyalar. Şu tarihten sonra: Kullanıcı bir web uygulamasına erişim izni verirse bu API, kullanıcının değişiklikleri okumasına veya doğrudan dosyalara kaydetmesine kullanıcının cihazındaki klasörlere. File System Access API, dosya okuma ve yazmanın ötesinde, dizinini açma ve içeriğini numaralandırma özelliği.

Daha önce dosya okuma ve yazma konusuyla çalıştıysanız şimdiki konuların çoğunu size tanıdık gelecektir. Tüm sistemler birbirinin aynısı olmadığından bu e-postayı yine de okumanızı öneririm.

File System Access API, şu tarayıcılarda çoğu Chromium tarayıcısında desteklenir: Windows, macOS, ChromeOS ve Linux. Bunun önemli bir istisnası Brave'dir. şu anda yalnızca bir işaretin arkasında kullanılabilir. Android desteği, crbug.com/1011535 bağlamında yapılmaktadır.

File System Access API'yi kullanma

File System Access API'nin gücünü ve kullanışlılığını göstermek için tek bir dosya metin düzenleyici'ye gidin. Bir metin dosyasını açmanıza, düzenlemenize, değişiklikleri diske geri kaydetmenize veya yeni bir dosya açın ve değişiklikleri diske kaydedin. Süslü bir şey değil, ancak size yardımcı olacak yeterince içerik sunuyor anlamaya başlamışsınızdır.

Tarayıcı desteği

Tarayıcı Desteği

  • Chrome: 86..
  • Kenar: 86..
  • Firefox: Desteklenmez..
  • Safari: desteklenmez..

Kaynak

Özellik algılama

File System Access API'nin desteklenip desteklenmediğini öğrenmek için seçici yönteminin desteklenip desteklenmediğini kontrol edin bilgi edinmenizi sağlar.

if ('showOpenFilePicker' in self) {
  // The `showOpenFilePicker()` method of the File System Access API is supported.
}

Dene

File System Access API'nin nasıl çalıştığını şu sayfada görebilirsiniz: metin düzenleyici demosunu göreceksiniz.

Yerel dosya sisteminden dosya okuma

Uygulamak istediğim ilk kullanım alanı, kullanıcıdan bir dosya seçmesini istemek, ardından bu dosyayı açıp okumak. dosyası oluşturur.

Kullanıcıdan okuyacak bir dosya seçmesini isteyin

File System Access API'nin giriş noktası: window.showOpenFilePicker(). Çağrı yapıldığında bir dosya seçici iletişim kutusu gösterilir. ve kullanıcıdan bir dosya seçmesini ister. Kullanıcı bir dosya seçtikten sonra API, bir dosya dizisi döndürür. herkese açık kullanıcı adları için geçerlidir. İsteğe bağlı bir options parametresi, Örneğin, kullanıcının birden fazla dosya, dizin ya da farklı dosya türleri seçmesine izin verebilirsiniz. Dosya seçici, herhangi bir seçenek belirtilmediğinde kullanıcının tek bir dosya seçmesine olanak tanır. Bu için idealdir.

Diğer birçok güçlü API gibi, showOpenFilePicker() çağrısı da güvenli bağlam ve kullanıcı hareketinin içinden çağrılmalıdır.

let fileHandle;
butOpenFile.addEventListener('click', async () => {
  // Destructure the one-element array.
  [fileHandle] = await window.showOpenFilePicker();
  // Do something with the file handle.
});

Kullanıcı bir dosya seçtiğinde, showOpenFilePicker() bir herkese açık kullanıcı adı dizisi döndürür. Bu örnekte, özelliklerini içeren bir FileSystemFileHandle içeren tek öğeli dizi dosyayla etkileşim kurmak için gereken yöntemleri içerir.

Daha sonra kullanılabilmesi için dosya herkese açık kullanıcı adını referans tutmanızda fayda vardır. Bu değişiklikleri dosyaya kaydetmek veya dosya ile ilgili diğer işlemleri gerçekleştirmek için gereken her şey.

Dosya sisteminden dosya okuma

Artık bir dosyanın herkese açık kullanıcı adını bildiğinize göre dosyanın özelliklerini alabilir veya dosyanın kendisine erişebilirsiniz. Şimdilik içeriğini okuyacağım. handle.getFile() çağrısı yapıldığında File döndürülür nesnesini ifade eder. Blobtan verileri almak için bloblardan birini çağırın yöntemler, (slice(), stream(), text() veya arrayBuffer()) tıklayın.

const file = await fileHandle.getFile();
const contents = await file.text();
.

FileSystemFileHandle.getFile() tarafından döndürülen File nesnesi yalnızca dosya değişmedi. Diskteki dosya değiştirilirse File nesnesi okunamaz ve değiştirilen ayarı okumak için yeni bir File nesnesi almak üzere getFile() öğesini tekrar çağırmanız gerekir dışı verilerdir.

Tüm unsurların birleşimi

Kullanıcılar Aç düğmesini tıkladığında tarayıcıda bir dosya seçici gösterilir. Bir dosya seçtikten sonra uygulama içerikleri okur ve bir <textarea> içine yerleştirir.

let fileHandle;
butOpenFile.addEventListener('click', async () => {
  [fileHandle] = await window.showOpenFilePicker();
  const file = await fileHandle.getFile();
  const contents = await file.text();
  textArea.value = contents;
});

Dosyayı yerel dosya sistemine yazma

Metin düzenleyicide bir dosyayı kaydetmenin iki yolu vardır: Kaydet ve Farklı Kaydet. Kaydet işlemi daha önce alınan dosya tanıtıcısını kullanarak değişiklikleri orijinal dosyaya yazar. Ancak Kaydet As, yeni bir dosya oluşturur ve bu nedenle yeni bir dosya herkese açık kullanıcı adı gerektirir.

Yeni dosya oluşturma

Bir dosyayı kaydetmek için, dosya seçiciyi gösteren showSaveFilePicker() çağrısını yapın "kaydet" içinde kullanıcının kaydetmek üzere kullanmak istediği yeni bir dosyayı seçmesine olanak tanır. Metin için Ayrıca, otomatik olarak bir .txt uzantısı eklemesini de istedim. Buna ek olarak parametreleridir.

async function getNewFileHandle() {
  const options = {
    types: [
      {
        description: 'Text Files',
        accept: {
          'text/plain': ['.txt'],
        },
      },
    ],
  };
  const handle = await window.showSaveFilePicker(options);
  return handle;
}
.

Değişiklikleri diske kaydet

Bir dosyada yapılan değişiklikleri kaydetmek için gereken tüm kodu aşağıdaki metin düzenleyici demomuzda bulabilirsiniz: GitHub. Temel dosya sistemi etkileşimleri fs-helpers.js. En basit şekilde, işlem aşağıdaki kod gibi görünür. Her adımı tek tek açıklayacağım.

// 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();
}

Diske veri yazılırken bir alt sınıf olan FileSystemWritableFileStream nesnesi kullanılır WritableStream. Dosyada createWritable() yöntemini çağırarak akışı oluşturun işleyici nesnesidir. createWritable() çağrıldığında, tarayıcı ilk olarak kullanıcının izin verip vermediğini kontrol eder dosyaya yazma izni olduğundan emin olun. Yazma izni verilmediyse tarayıcı komut istemi kullanıcıdan izin alması gerekir. İzin verilmezse createWritable(), DOMException ve uygulama dosyaya yazamaz. Metin düzenleyicide, DOMException nesne, saveFile() yönteminde işlenir.

write() yöntemi, metin düzenleyici için gerekli olan bir dize alır. Ama aynı zamanda BufferSource veya Blob. Örneğin, bir akışı doğrudan şunları sağlar:

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.
}

Ayrıca akışta seek() veya truncate() düğmesini tıklayarak belirli bir konuma getirin veya dosyayı yeniden boyutlandırın.

Önerilen bir dosya adı ve başlangıç dizini belirtme

Birçok durumda, uygulamanızın varsayılan bir dosya adı veya konum önermesini isteyebilirsiniz. Örneğin, düzenleyici, Untitled yerine varsayılan dosya adı olarak Untitled Text.txt önerebilir. Siz bunu showSaveFilePicker seçeneklerinin bir parçası olarak suggestedName özelliği ileterek elde edebilir.

const fileHandle = await self.showSaveFilePicker({
  suggestedName: 'Untitled Text.txt',
  types: [{
    description: 'Text documents',
    accept: {
      'text/plain': ['.txt'],
    },
  }],
});

Aynı durum varsayılan başlangıç dizini için de geçerlidir. Bir metin düzenleyici oluşturuyorsanız, dosyayı kaydetme veya dosya açma iletişim kutusunu varsayılan documents klasöründe başlatırken, bir resim için düzenleyicisini varsayılan pictures klasöründen başlatmak isteyebilirsiniz. Varsayılan bir başlangıç önerebilirsiniz dizinini oluşturmak için startIn özelliğini showSaveFilePicker, showDirectoryPicker() veya Benzer showOpenFilePicker yöntem.

const fileHandle = await self.showOpenFilePicker({
  startIn: 'pictures'
});

İyi bilinen sistem dizinleri listesi:

  • desktop: Kullanıcının masaüstü dizini (varsa).
  • documents: Kullanıcı tarafından oluşturulan dokümanların genellikle depolanacağı dizin.
  • downloads: İndirilen dosyaların genellikle depolanacağı dizin.
  • music: Ses dosyalarının genellikle depolanacağı dizin.
  • pictures: Fotoğrafların ve diğer hareketsiz resimlerin genellikle depolanacağı dizin.
  • videos: Videoların veya filmlerin genellikle depolanacağı dizin.

Tanınmış sistem dizinlerinin yanı sıra, mevcut bir dosyayı veya dizin tutma yerini de startIn için bir değer. İletişim kutusu aynı dizinde açılır.

// Assume `directoryHandle` is a handle to a previously opened directory.
const fileHandle = await self.showOpenFilePicker({
  startIn: directoryHandle
});

Farklı dosya seçicilerin amacını belirtme

Bazen uygulamalarda farklı amaçlar için farklı seçiciler bulunur. Örneğin, zengin metin düzenleyici, kullanıcının metin dosyalarını açmasına aynı zamanda resimleri içe aktarmasına da izin verebilir. Varsayılan olarak her dosya seçici, hatırlanan son konumda açılır. id değerlerini depolayarak bu durumu atlatabilirsiniz her tür seçici için iyi performans gösterir. id belirtilirse dosya seçici uygulaması bu id için son kullanılan dizini ayrı tutun.

const fileHandle1 = await self.showSaveFilePicker({
  id: 'openText',
});

const fileHandle2 = await self.showSaveFilePicker({
  id: 'importImage',
});

Dosya tanıtıcılarını veya dizin tanıtıcılarını IndexedDB'de depolama

Dosya tanıtıcıları ve dizin tanıtıcıları seri hale getirilebilir, yani bir dosyayı veya dizin IndexedDB için dizin tutamacı olarak veya postMessage() öğesini çağırarak aynı üst düzey kaynak.

Dosya veya dizin tanıtıcılarını IndexedDB'ye kaydetmek, durumu depolayabileceğiniz veya dosyaları veya dizinleri içerebilir. Bu, yakın zamanda açılan kampanyaların bir listesini tutmanızı mümkün kılar veya düzenlenmiş dosyalar, uygulama açıldığında son dosyayı yeniden açmayı teklif etme, önceki çalışan dosyayı geri yükleme dizini ve diğer verileri gösterir. Metin düzenleyicide, kullanıcının sahip olduğu en son beş dosyanın bir listesini saklarım bu dosyalara yeniden erişebilmek mümkün oluyor.

Aşağıdaki kod örneğinde, bir dosya işleyici ile dizin işleyicinin depolanması ve alınması gösterilmektedir. Şunları yapabilirsiniz: bunun işleyiş şeklini Glitch'te görebilirsiniz. (Ben idb-keyval kitaplığının kısaltılmış halidir.)

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);
  }
});

Depolanan dosya veya dizin işleyicileri ve izinleri

İzinler oturumlar arasında her zaman uygulanmadığından, kullanıcının queryPermission() kullanarak dosya veya dizin için izin verdi. Henüz paylaşmadıysa şu numarayı arayın: (yeniden) istemek için requestPermission(). Bu işlem, dosya ve dizin işleyicileri için de aynı şekilde yapılır. Siz fileOrDirectoryHandle.requestPermission(descriptor) veya Sırasıyla fileOrDirectoryHandle.queryPermission(descriptor).

Metin düzenleyicide kullanıcının daha önce kontrol edip etmediğini kontrol eden bir verifyPermission() yöntemi oluşturdum. istekte bulunur ve gerekirse istekte bulunur.

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;
}

Okuma isteğiyle birlikte yazma izni isteyerek izin istemlerinin sayısını azalttım; Kullanıcı, dosyayı açarken bir istem görür ve dosyaya hem okuma hem de yazma izni verir.

Bir dizini açma ve içeriğini numaralandırma

Bir dizindeki tüm dosyaları numaralandırmak için showDirectoryPicker() çağrısı yapın. Kullanıcı seçicide bir dizin seçtiğinde, bundan sonra FileSystemDirectoryHandle döndürülmüştür; bu, dizinin dosyalarını sıralamanıza ve bunlara erişmenize olanak tanır. Varsayılan olarak, dizindeki dosyalara erişebilir, ancak yazma erişimine ihtiyacınız varsa Yönteme { mode: 'readwrite' }.

butDir.addEventListener('click', async () => {
  const dirHandle = await window.showDirectoryPicker();
  for await (const entry of dirHandle.values()) {
    console.log(entry.kind, entry.name);
  }
});

Ayrıca her dosyaya getFile() kullanarak erişmeniz gerekiyorsa, örneğin, boyutlarına göre, her sonuç için sıralı olarak await kullanmayın, bunun yerine tüm dosyaları (ör. Promise.all() kullanarak) için paralellik de kullanabilirsiniz.

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));
});

Bir dizinde dosya ve klasör oluşturma veya bunlara erişme

Bir dizinde, getFileHandle() veya sırasıyla getDirectoryHandle() yöntemidir. create anahtarı ve şu boole değerine sahip isteğe bağlı bir options nesnesi geçirerek true veya false varsa, yeni bir dosya veya klasör yoksa yeni bir dosya veya klasörün oluşturulması gerekip gerekmediğini belirleyebilirsiniz.

// 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 });

Dizindeki bir öğenin yolunu çözme

Bir dizindeki dosyalar veya klasörlerle çalışırken öğenin yolunu çözümlemek yararlı olabilir söz konusu olabilir. Bu, uygun şekilde adlandırılmış resolve() yöntemiyle yapılabilir. Çözüm için öğesi, dizinin doğrudan veya dolaylı bir alt öğesi olabilir.

// 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"]

Dizindeki dosya ve klasörleri silme

Bir dizine erişim elde ettiyseniz içerilen dosya ve klasörleri removeEntry() yöntemini kullanabilirsiniz. Klasörler için silme işlemi isteğe bağlı olarak yinelenebilir ve tüm alt klasörleri ve bunların içerdiği dosyaları.

// Delete a file.
await directoryHandle.removeEntry('Abandoned Projects.txt');
// Recursively delete a folder.
await directoryHandle.removeEntry('Old Stuff', { recursive: true });

Bir dosyayı veya klasörü doğrudan silme

Bir dosyaya veya dizin tutma yerine erişiminiz varsa FileSystemFileHandle ya daremove() Kaldırmak için FileSystemDirectoryHandle.

// Delete a file.
await fileHandle.remove();
// Delete a directory.
await directoryHandle.remove();

Dosya ve klasörleri yeniden adlandırma ve taşıma

Dosya ve klasörler yeniden adlandırılabilir veya yeni bir konuma taşıyabilirsiniz move() FileSystemHandle arayüzü. FileSystemHandle, FileSystemFileHandle ve alt arayüzlere sahiptir FileSystemDirectoryHandle. move() yöntemi bir veya iki parametre alır. İlki yeni adı içeren bir dize veya hedef klasör için bir FileSystemDirectoryHandle olmalıdır. istiyorsanız isteğe bağlı ikinci parametre, yeni adı taşıyan bir dizedir. Dolayısıyla taşıma ve yeniden adlandırma, tek adımda tamamlanabilir.

// 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');
.

Sürükle ve bırak entegrasyonu

İlgili içeriği oluşturmak için kullanılan HTML Sürükle ve Bırak arayüzleri web uygulamalarının kabul etmesine izin ver dosyaları sürükleyip bırakma bir web sayfasında gösterebilirsiniz. Sürükle ve bırak işlemi sırasında sürüklenen dosya ve dizin öğeleri ilişkilendirilir dizin girişlerine göre sıralayın. DataTransferItem.getAsFileSystemHandle() yöntemi, sürüklenen öğe bir dosyaysa FileSystemFileHandle nesnesiyle bir vaat döndürür ve FileSystemDirectoryHandle nesnesiyle belirtin. Aşağıdaki giriş uygulamalı olarak gösterir. Sürükle ve Bırak arayüzünün arayüzünün DataTransferItem.kind Dosyalar ve dizinler için "file"; File System Access API'nin FileSystemHandle.kind ise Dosyalar için "file" ve dizinler için "directory".

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}`);
    }
  }
});

Kaynak gizli dosya sistemine erişme

Kaynak gizli dosya sistemi, adından da anlaşılacağı üzere sayfanın başlangıcı. Tarayıcılar genellikle bu yapılandırmanın içeriğini bir yerde diske bir kaynak gizli dosya sistemi kullanıyorsanız, içeriğin kullanıcı tarafından oluşturulması amaçlanmaz erişilebilir. Benzer şekilde, dosya veya dizinlerin kaynak gizli dosya sisteminin alt öğelerinin adları mevcut. Tarayıcı, tarayıcı tarafından dahili olarak dosyalar vardır (bu bir kaynak gizli dosya sistemi olduğu için) tarayıcı bu "dosyaları" veri yapısı olabilir. Bu API'yi kullanıyorsanız oluşturulan dosyaların sabit diskte bire bir eşleştiğini bekleyemezsiniz. Şu cihazlarda her zamanki gibi çalışmaya devam edebilirsiniz: kök FileSystemDirectoryHandle kaynağına erişim sağladıktan sonra kaynak gizli dosya sistemini devre dışı bırakın.

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 });

Tarayıcı Desteği

  • Chrome: 86..
  • Kenar: 86..
  • Firefox: 111..
  • Safari: 15.2..

Kaynak

Kaynak gizli dosya sisteminden performans için optimize edilmiş dosyalara erişme

Kaynak gizli dosya sistemi, son derece normal performans için optimize edilmiştir. Örneğin, bir dosyaya yerinde ve özel yazma erişimi sunarak içerik. Chromium 102 ve sonraki sürümlerde kaynak gizli dosya sisteminde, dosya erişimi basitleştiriliyor: createSyncAccessHandle() (eşzamanlı okuma ve yazma işlemleri için). FileSystemFileHandle tarihinde sadece şurada açığa çıktı: Web İşçileri.

// (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 });
.

Çoklu dolgu

File System Access API yöntemlerini tamamen doldurmak mümkün değildir.

  • showOpenFilePicker() yöntemi, bir <input type="file"> öğesiyle tahmin edilebilir.
  • showSaveFilePicker() yöntemi, bir <a download="file_name"> öğesiyle simüle edilebilir Ancak bu, programatik indirme işlemini tetikler ve mevcut dosyaların üzerine yazmaya izin vermez.
  • showDirectoryPicker() yöntemi, standart dışı <input type="file" webkitdirectory> öğesi.

browser-fs-access adlı bir kitaplık geliştirdik. System Access API mümkün olduğunda durumlarda işe yarar.

Güvenlik ve izinler

Chrome ekibi, File System Access API'yi temel ilkeleri kullanarak tasarlamış ve uygulamıştır. Kullanıcı erişimi dahil olmak üzere Güçlü Web Platformu Özelliklerine Erişimi Kontrol Etme'de tanımlanmıştır kontrol, şeffaflık ve kullanıcı ergonomisi.

Dosya açma veya yeni bir dosya kaydetme

Okumak üzere bir dosyayı açmak için dosya seçici
Okumak üzere mevcut bir dosyayı açmak için kullanılan dosya seçici.

Bir dosyayı açarken kullanıcı, dosya seçiciyi kullanarak dosya veya dizini okuma izni verir. Açık dosya seçici yalnızca güvenli bir göz atın. Kullanıcılar fikirlerini değiştirirse dosyadaki seçimi iptal edebilir. ve sitenin hiçbir şeye erişimi olmaz. Bu, <input type="file"> öğesi.

Bir dosyayı diske kaydetmek için dosya seçici.
Dosyaları diske kaydetmek için kullanılan dosya seçici.

Benzer şekilde, bir web uygulaması yeni bir dosya kaydetmek istediğinde tarayıcı, dosya kaydetme seçiciyi gösterir. kullanıcının yeni dosyanın adını ve konumunu belirtmesine olanak tanır. Yeni bir dosya kaydettiği için (mevcut bir dosyanın üzerine yazılması yerine) cihaza veri alırsa dosya seçici, uygulamaya yazması gerekir.

Kısıtlanmış klasörler

Kullanıcıların ve verilerinin korunmasına yardımcı olmak için tarayıcı, kullanıcının belirli klasörlerini de seçebilirsiniz. Bu durumda, tarayıcıda bir istem gösterilir ve kullanıcıdan farklı bir tıklayın.

Mevcut bir dosyayı veya dizini değiştirme

Bir web uygulaması, kullanıcıdan açık izin almadan diskteki bir dosyayı değiştiremez.

İzin istemi

Bir kullanıcı daha önce okuma erişimi verdiği bir dosyada yapılan değişiklikleri kaydetmek isterse, tarayıcı Sitenin, değişiklikleri diske yazma izni isteyen bir izin istemi gösteriyor. İzin isteği yalnızca bir kullanıcı hareketiyle (örneğin, Kaydet'i tıklayarak) tetiklenebilir. düğmesini tıklayın.

Dosya kaydedilmeden önce gösterilen izin istemi.
Tarayıcıya yazma izni verilmeden önce kullanıcılara gösterilen istem izni bulunmalıdır.

Alternatif olarak, IDE gibi birden fazla dosyayı düzenleyen bir web uygulaması da kayıt izni isteyebilir anında değişir.

Kullanıcı İptal'i seçer ve yazma erişimi vermezse web uygulaması, yapılan değişiklikleri yerel dosya. Kullanıcının verilerini kaydetmesi için alternatif bir yöntem Örneğin, "indirme" dosyaya kaydedebilir veya verileri buluta kaydedebilirsiniz.

Şeffaflık

Çok amaçlı adres çubuğu simgesi
Kullanıcının web sitesine şu izni verdiğini gösteren adres çubuğu simgesi: yerel bir dosyaya kaydedebilirsiniz.

Kullanıcı bir web uygulamasına yerel dosya kaydetme izni verdiğinde, tarayıcı bir simge yazın. Simge tıklandığında, kullanıcının verdiği dosyaların listesini gösteren bir pop-up açılır erişim. Kullanıcı dilerse bu erişimi her zaman iptal edebilir.

İzin kalıcılığı

Web uygulaması, dosyanın tüm sekmelerine kadar istemde bulunmadan dosyadaki değişiklikleri kaydetmeye devam edebilir kaynak kapalı. Bir sekme kapatıldığında site tüm erişimi kaybeder. Kullanıcı web uygulamasında dosyalara erişmeleri yeniden istenir.

Geri bildirim

File System Access API ile ilgili deneyimlerinizi öğrenmek isteriz.

Bize API tasarımı hakkında bilgi verin

API'de beklediğiniz gibi çalışmayan bir şey mi var? Veya eksik yöntemler mi var? gereken özellikler veya özellikler neler olabilir? Menkul kıymetle ilgili bir sorunuz veya yorumunuz varsa modeli nedir?

Uygulamayla ilgili bir sorun mu var?

Chrome'un uygulanmasıyla ilgili bir hata buldunuz mu? Yoksa uygulama, spesifikasyondan farklı mı?

  • https://new.crbug.com adresinden hata bildiriminde bulunun. Açıklamalarınızı mümkün oldukça detaylandırmaya çalışın. yeniden oluşturma talimatlarını ve Bileşenler'i Blink>Storage>FileSystem olarak ayarlayın. Glitch, hızlı tekrarlar paylaşmak için idealdir.

API'yi kullanmayı mı planlıyorsunuz?

Sitenizde File System Access API'yi kullanmayı mı planlıyorsunuz? Herkese açık desteğiniz, öncelik vermemize ve diğer tarayıcı tedarikçilerine söz konusu özellikleri desteklemenin ne kadar önemli olduğunu gösterir.

Faydalı bağlantılar

Teşekkür

File System Access API spesifikasyonunu yazan: Marijn Kruisselbrink