Skip to content

Commit

Permalink
Add OPFS standalone article / Update API landing to "File System API" (
Browse files Browse the repository at this point in the history
…#27440)

* Add OPFS standalone article

* Multiple small improvements to OPFS-related reference docs

* Update files/en-us/web/api/file_system_access_api/index.md

Co-authored-by: Thomas Steiner <[email protected]>

* Update files/en-us/web/api/file_system_access_api/index.md

Co-authored-by: Thomas Steiner <[email protected]>

* Update files/en-us/web/api/file_system_access_api/origin_private_file_system/index.md

Co-authored-by: Thomas Steiner <[email protected]>

* Update files/en-us/web/api/filesystemsyncaccesshandle/write/index.md

Co-authored-by: Thomas Steiner <[email protected]>

* Update files/en-us/web/api/file_system_access_api/origin_private_file_system/index.md

Co-authored-by: Thomas Steiner <[email protected]>

* Update files/en-us/web/api/filesystemwritablefilestream/seek/index.md

Co-authored-by: Thomas Steiner <[email protected]>

* Update files/en-us/web/api/filesystemwritablefilestream/truncate/index.md

Co-authored-by: Thomas Steiner <[email protected]>

* Update files/en-us/web/api/file_system_access_api/origin_private_file_system/index.md

Co-authored-by: Thomas Steiner <[email protected]>

* Update files/en-us/web/api/file_system_access_api/origin_private_file_system/index.md

Co-authored-by: Thomas Steiner <[email protected]>

* Update files/en-us/web/api/file_system_access_api/origin_private_file_system/index.md

Co-authored-by: Thomas Steiner <[email protected]>

* Update files/en-us/web/api/file_system_access_api/origin_private_file_system/index.md

Co-authored-by: Thomas Steiner <[email protected]>

* Update files/en-us/web/api/filesystemsyncaccesshandle/index.md

Co-authored-by: Thomas Steiner <[email protected]>

* Change File System Access API to File System API

* Fix a couple more broken links

* More broken link fixes

* small assorted updates

* Fixes made for Rumyra comments

---------

Co-authored-by: Thomas Steiner <[email protected]>
  • Loading branch information
chrisdavidmills and tomayac authored Aug 2, 2023
1 parent 3a83d2b commit 5885c6c
Show file tree
Hide file tree
Showing 44 changed files with 453 additions and 184 deletions.
5 changes: 3 additions & 2 deletions files/en-us/_redirects.txt
Original file line number Diff line number Diff line change
Expand Up @@ -3458,7 +3458,7 @@
/en-US/docs/Event.initEvent /en-US/docs/Web/API/Event/initEvent
/en-US/docs/Extension_Library/Extensions /en-US/docs/Mozilla/Add-ons
/en-US/docs/Extension_Library/Extensions/Firefox /en-US/docs/Mozilla/Add-ons
/en-US/docs/File_System_Access_API /en-US/docs/Web/API/File_System_Access_API
/en-US/docs/File_System_Access_API /en-US/docs/Web/API/File_System_API
/en-US/docs/Firefox 11 for developers /en-US/docs/Mozilla/Firefox/Releases/11
/en-US/docs/Firefox_1.5 /en-US/docs/Mozilla/Firefox/Releases/1.5
/en-US/docs/Firefox_1.5_Beta_for_Developers /en-US/docs/Mozilla/Firefox/Releases/1.5
Expand Down Expand Up @@ -8198,8 +8198,9 @@
/en-US/docs/Web/API/FileSystemFlags/create /en-US/docs/Web/API/FileSystemDirectoryEntry/getFile
/en-US/docs/Web/API/FileSystemFlags/exclusive /en-US/docs/Web/API/FileSystemDirectoryEntry/getFile
/en-US/docs/Web/API/File_Handle_API /en-US/docs/Web/API/File_and_Directory_Entries_API
/en-US/docs/Web/API/File_System_API /en-US/docs/Web/API/File_and_Directory_Entries_API
/en-US/docs/Web/API/File_System_API/Introduction /en-US/docs/Web/API/File_and_Directory_Entries_API/Introduction
/en-US/docs/Web/API/File_System_Access_API /en-US/docs/Web/API/File_System_API
/en-US/docs/Web/API/File_System_Access_API/Origin_private_file_system /en-US/docs/Web/API/File_System_API/Origin_private_file_system
/en-US/docs/Web/API/Float32Array /en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array
/en-US/docs/Web/API/Float64Array /en-US/docs/Web/JavaScript/Reference/Global_Objects/Float64Array
/en-US/docs/Web/API/FocusEvent.FocusEvent /en-US/docs/Web/API/FocusEvent/FocusEvent
Expand Down
2 changes: 1 addition & 1 deletion files/en-us/_wikihistory.json
Original file line number Diff line number Diff line change
Expand Up @@ -36002,7 +36002,7 @@
"sicking"
]
},
"Web/API/File_System_Access_API": {
"Web/API/File_System_API": {
"modified": "2020-12-12T15:46:27.214Z",
"contributors": ["Rumyra"]
},
Expand Down
2 changes: 1 addition & 1 deletion files/en-us/mozilla/firefox/releases/111/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ No notable changes.

### APIs

- [Origin private file system (OPFS)](/en-US/docs/Web/API/File_System_Access_API#origin_private_file_system) is now supported when using the [File System Access API](/en-US/docs/Web/API/File_System_Access_API).
- [Origin private file system (OPFS)](/en-US/docs/Web/API/File_System_API/Origin_private_file_system) is now supported when using the [File System API](/en-US/docs/Web/API/File_System_API).
The data in this file system is origin-specific: permission prompts are not required to access files, and clearing data for the site/origin deletes the storage.
The OPFS is accessed with the {{domxref("StorageManager.getDirectory()")}} method, by calling `navigator.storage.getDirectory()` in a worker or the main thread.
See [Firefox bug 1785123](https://bugzil.la/1785123) for more details.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -72,5 +72,5 @@ elem.addEventListener("drop", async (e) => {

## See also

- [File System Access API](/en-US/docs/Web/API/File_System_Access_API)
- [File System API](/en-US/docs/Web/API/File_System_API)
- [The File System Access API: simplifying access to local files](https://web.dev/file-system-access/)
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
---
title: File System Access API
slug: Web/API/File_System_Access_API
title: File System API
slug: Web/API/File_System_API
page-type: web-api-overview
browser-compat:
- api.FileSystemHandle
- api.FileSystemFileHandle
---

{{securecontext_header}}{{DefaultAPISidebar("File System Access API")}}
{{securecontext_header}}{{DefaultAPISidebar("File System API")}}

The File System Access API allows read, write and file management capabilities.
The File System API — with extensions provided via the [File System Access API](https://wicg.github.io/file-system-access/) to access files on the device file system — allows read, write and file management capabilities.

## Concepts and Usage

Expand All @@ -24,36 +24,20 @@ You can also gain access to file handles via:
- The {{domxref('DataTransferItem.getAsFileSystemHandle()')}} method of the {{domxref('HTML Drag and Drop API', 'HTML Drag and Drop API', '', 'nocode')}}.
- The [File Handling API](https://developer.chrome.com/en/articles/file-handling/).

Each handle provides its own functionality and there are a few differences depending on which one you are using (see the [interfaces](#interfaces) section for specific details). You then can access file data, or information (including children) of the directory selected. This API opens up potential functionality the web has been lacking. Still, security has been of utmost concern when designing the API, and access to file/directory data is disallowed unless the user specifically permits it.
Each handle provides its own functionality and there are a few differences depending on which one you are using (see the [interfaces](#interfaces) section for specific details). You then can access file data, or information (including children) of the directory selected. This API opens up potential functionality the web has been lacking. Still, security has been of utmost concern when designing the API, and access to file/directory data is disallowed unless the user specifically permits it (note that this is not the case with the [Origin private file system](#origin_private_file_system), because it is not visible to the user).

> **Note:** The different exceptions that can be thrown when using the features of this API are listed on relevant pages as defined in the spec. However, the situation is made more complex by the interaction of the API and the underlying operating system. A proposal has been made to [list the error mappings in the spec](https://github.com/whatwg/fs/issues/57), which includes useful related information.
> **Note:** Objects based on {{domxref("FileSystemHandle")}} can also be serialized into an {{domxref("IndexedDB API", "IndexedDB", "", "nocode")}} database instance, or transferred via {{domxref("window.postMessage", "postMessage()")}}.
### Origin private file system

The [origin private file system (OPFS)](https://fs.spec.whatwg.org/#origin-private-file-system) is a storage endpoint private to the origin of the page, providing optional access to a special kind of file that is highly optimized for performance, for example, by offering in-place and exclusive write access to a file's content.
The origin private file system (OPFS) is a storage endpoint provided as part of the File System API, which is private to the origin of the page and not visible to the user like the regular file system. It provides access to a special kind of file that is highly optimized for performance and offers in-place write access to its content.

Storing data in the OPFS is similar to storing data in any other browser-provided storage mechanism that's private to the origin of the page (for example the {{domxref("IndexedDB API", "IndexedDB API", "", "nocode")}}). This means that files in the OPFS differ from files selected using a picker in the following ways:

- Permission prompts are not required to access files in the OPFS.
- Clearing data for the site deletes the OPFS.
- The OPFS is subject to browser quota restrictions.

Files can be manipulated inside the OPFS via a three-step process:

1. The {{domxref("StorageManager.getDirectory()")}} method, which is obtained using [`navigator.storage.getDirectory()`](/en-US/docs/Web/API/Navigator/storage) in a worker or the main thread, returns a reference to a {{domxref("FileSystemDirectoryHandle")}} object allowing access to a directory and its contents — this represents the root of the OPFS.
2. The {{domxref("FileSystemDirectoryHandle.getFileHandle()")}} method is invoked to return a {{domxref('FileSystemFileHandle')}} object representing a handle to a specific file in the directory.
3. The {{domxref('FileSystemFileHandle.createSyncAccessHandle', 'createSyncAccessHandle()')}} method is invoked on that file handle, and returns a {{domxref('FileSystemSyncAccessHandle')}} object that can be used to read and write to the file. This is a high-performance handle for _synchronous_ read/write operations (the other handle types are asynchronous). The synchronous nature of this class brings performance advantages intended for use in contexts where asynchronous operations come with high overhead (for example, [WebAssembly](/en-US/docs/WebAssembly)). Note that it is only usable inside dedicated [Web Workers](/en-US/docs/Web/API/Web_Workers_API).

While browsers typically implement this by persisting the contents of the OPFS to disk somewhere, it is not intended that the contents be easily user-accessible. While the browser might make it seem that there are files, they might be stored in a database or any other data structure. You cannot expect to find the created files matched one-to-one somewhere on the hard disk.

> **Note:** Writes performed using {{domxref('FileSystemSyncAccessHandle.write()')}} are in-place, meaning that changes are written to the actual underlying file at the same time as they are written to the writer. This is not the case with other writing mechanisms available in this API (e.g. {{domxref('FileSystemFileHandle.createWritable()')}}), where changes are not committed to disk until the writing stream is closed.
Read our [Origin private file system](/en-US/docs/Web/API/File_System_API/Origin_private_file_system) for instructions on how to use it.

### Saving files

There is also "save" functionality:

- In the case of the asynchronous handles, use the {{domxref('FileSystemWritableFileStream')}} interface. Once the data you'd like to save is in a format of {{domxref('Blob')}}, {{jsxref("String")}} object, string literal or {{jsxref('ArrayBuffer', 'buffer')}}, you can open a stream and save the data to a file. This can be the existing file or a new file.
- In the case of the synchronous {{domxref('FileSystemSyncAccessHandle')}}, you write changes to a file using the {{domxref('FileSystemSyncAccessHandle.write', 'write()')}} method. You can optionally also call {{domxref('FileSystemSyncAccessHandle.flush', 'flush()')}} if you need the changes committed to disk at a specific time (otherwise you can leave the underlying operating system to handle this when it sees fit, which should be OK in most cases).

Expand Down Expand Up @@ -240,4 +224,5 @@ onmessage = async (e) => {

## See also

- [The File System Access API: simplifying access to local files](https://web.dev/file-system-access/)
- [The File System Access API: simplifying access to local files](https://web.dev/file-system-access/) on web.dev
- [The origin private file system](https://web.dev/origin-private-file-system/) on web.dev
Loading

0 comments on commit 5885c6c

Please sign in to comment.