Skip to content

Commit

Permalink
Add missing member list to File System API (#33380)
Browse files Browse the repository at this point in the history
fix
  • Loading branch information
skyclouds2001 authored May 3, 2024
1 parent dc61b7e commit 2b6bddf
Show file tree
Hide file tree
Showing 4 changed files with 24 additions and 15 deletions.
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")}}

0 comments on commit 2b6bddf

Please sign in to comment.