Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add missing member list to File System API #33380

Merged
merged 1 commit into from
May 3, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ status:
browser-compat: api.DataTransferItem.getAsFileSystemHandle
---

{{securecontext_header}}{{APIRef("HTML Drag and Drop API")}}{{SeeCompatTable}}
{{securecontext_header}}{{APIRef("File System API")}}{{SeeCompatTable}}

The **`getAsFileSystemHandle()`** method of the
{{domxref("DataTransferItem")}} interface returns a {{domxref('FileSystemFileHandle')}}
Expand Down Expand Up @@ -39,8 +39,8 @@ None.

## Examples

This example uses the `getAsFileSystemHandle` method to return
{{domxref('FileSystemHandle','file handles')}} for dropped items.
This example uses the `getAsFileSystemHandle()` method to return
{{domxref('FileSystemHandle', 'file handles', '', 'nocode')}} for dropped items.

```js
elem.addEventListener("dragover", (e) => {
Expand Down
25 changes: 19 additions & 6 deletions files/en-us/web/api/file_system_api/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ The handles represent a file or directory on the user's system. You can first ga

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 {{domxref('DataTransferItem.getAsFileSystemHandle()')}} method of the {{domxref('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 (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).
Expand All @@ -50,15 +50,28 @@ Read our [Origin private file system](/en-US/docs/Web/API/File_System_API/Origin
## Interfaces

- {{domxref("FileSystemHandle")}}
- : The **`FileSystemHandle`** interface is an object which represents an entry. Multiple handles can represent the same entry. For the most part you do not work with `FileSystemHandle` directly but rather its child interfaces {{domxref('FileSystemFileHandle')}} and {{domxref('FileSystemDirectoryHandle')}}.
- : An object which represents a file or directory entry. Multiple handles can represent the same entry. For the most part you do not work with `FileSystemHandle` directly but rather its child interfaces {{domxref('FileSystemFileHandle')}} and {{domxref('FileSystemDirectoryHandle')}}.
- {{domxref("FileSystemFileHandle")}}
- : Provides a handle to a file system entry.
- {{domxref("FileSystemDirectoryHandle")}}
- : provides a handle to a file system directory.
- : Provides a handle to a file system directory.
- {{domxref("FileSystemSyncAccessHandle")}}
- : Provides a synchronous handle to a file system entry, which operates in-place on a single file on disk. The synchronous nature of the file reads and writes allows for higher performance for critical methods in contexts where asynchronous operations come with high overhead, e.g., [WebAssembly](/en-US/docs/WebAssembly). This class is only accessible inside dedicated [Web Workers](/en-US/docs/Web/API/Web_Workers_API) for files within the [origin private file system](#origin_private_file_system).
- {{domxref("FileSystemWritableFileStream")}}
- : is a {{domxref('WritableStream')}} object with additional convenience methods, which operates on a single file on disk.
- : A {{domxref('WritableStream')}} object with additional convenience methods, which operates on a single file on disk.

### Extensions to other interfaces

- {{domxref("Window.showDirectoryPicker()")}}
- : Displays a directory picker which allows the user to select a directory.
- {{domxref("Window.showOpenFilePicker()")}}
- : Shows a file picker that allows a user to select a file or multiple files.
- {{domxref("Window.showSaveFilePicker()")}}
- : Shows a file picker that allows a user to save a file.
- {{domxref("DataTransferItem.getAsFileSystemHandle()")}}
- : Returns a {{domxref('FileSystemFileHandle')}} if the dragged item is a file, or a {{domxref('FileSystemDirectoryHandle')}} if the dragged item is a directory.
- {{domxref("StorageManager.getDirectory()")}}
- : Used to obtain a reference to a {{domxref("FileSystemDirectoryHandle")}} object allowing access to a directory and its contents, stored in the [origin private file system](/en-US/docs/Web/API/File_System_API/Origin_private_file_system). Returns a {{jsxref('Promise')}} that fulfills with a {{domxref("FileSystemDirectoryHandle")}} object.

## Examples

Expand Down Expand Up @@ -230,5 +243,5 @@ onmessage = async (e) => {

## See also

- [The File System Access API: simplifying access to local files](https://developer.chrome.com/docs/capabilities/web-apis/file-system-access) on web.dev
- [The origin private file system](https://web.dev/articles/origin-private-file-system) on web.dev
- [The File System Access API: simplifying access to local files](https://developer.chrome.com/docs/capabilities/web-apis/file-system-access)
- [The origin private file system](https://web.dev/articles/origin-private-file-system)
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
title: Origin private file system
slug: Web/API/File_System_API/Origin_private_file_system
page-type: guide
browser-compat: api.StorageManager.getDirectory
---

{{securecontext_header}}{{DefaultAPISidebar("File System API")}}{{AvailableInWorkers}}
Expand Down Expand Up @@ -191,10 +190,6 @@ console.log(textDecoder.decode(dataView));
accessHandle.truncate(4);
```

## Browser compatibility

{{Compat}}

## See also

- [The origin private file system](https://web.dev/articles/origin-private-file-system) on web.dev
3 changes: 2 additions & 1 deletion files/en-us/web/api/storagemanager/getdirectory/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -83,5 +83,6 @@ onmessage = async (e) => {
## See also

- {{domxref("StorageManager")}}
- {{domxref("navigator.storage")}}
- {{domxref("Navigator.storage")}}
- {{domxref("WorkerNavigator.storage")}}
- {{domxref("FileSystemDirectoryHandle")}}