1. Introduction
This section is non-normative.
This API enables developers to build powerful apps that interact with other (non-Web) apps on the user’s device via the device’s file system. Prominent examples of applications where users expect this functionality are IDEs, photo and video editors, text editors, and more. After a user grants a web app access, this API allows the app to read or save changes directly to files and folders on the user’s device. Beyond reading and writing files, this API provides the ability to open a directory and enumerate its contents. Additionally, web apps can use this API to store references to files and directories they’ve been given access to, allowing the web apps to later regain access to the same content without requiring the user to select the same file again.
This
API
is
similar
to
<input
type=file>
and
<input
type=file
webkitdirectory>
[entries-api]
in
that
user
interaction
happens
through
file
and
directory
picker
dialogs.
Unlike
those
APIs,
this
API
is
currently
purely
a
javascript
API,
and
does
not
integrate
with
forms
and/or
input
elements.
This API extends the API in [FS] , which specifies a bucket file system which websites can get access to without having to first prompt the user for access.
2. Files and Directories
2.1. Concepts
A valid suffix code point is a code point that is ASCII alphanumeric , U+002B (+), or U+002E (.).
Note:
These
code
points
were
chosen
to
support
most
pre-existing
file
formats.
The
vast
majority
of
file
extensions
are
purely
alphanumeric,
but
compound
extensions
(such
as
.tar.gz
)
and
extensions
such
as
.c++
for
C++
source
code
are
also
fairly
common,
hence
the
inclusion
of
+
and
.
as
allowed
code
points.
2.2. Permissions
The
"file-system"
powerful
feature
’s
permission-related
algorithms
and
types
are
defined
as
follows:
- permission descriptor type
-
FileSystemPermissionDescriptor
, defined as:enum
{FileSystemPermissionMode
,"read"
,"readwrite"
};"write" dictionary
:FileSystemPermissionDescriptor PermissionDescriptor {required FileSystemHandle
;handle FileSystemPermissionMode
= "read"; };mode - permission state constraints
-
To determine permission state constraints for a
FileSystemPermissionDescriptor
desc , run these steps:-
Let entry be desc ["
handle
"]'s entry . -
If entry represents a file system entry in a bucket file system , this descriptor’s permission state must always be "
granted
". -
Otherwise, if entry ’s parent is not null, this descriptor’s permission state must be equal to the permission state for a descriptor with the same
mode
, and ahandle
representing entry ’s parent . -
Otherwise, if desc ["
mode
"] is "readwrite
":-
Let read state be the permission state for a descriptor with the same
handle
, but whosemode
is "read
". -
Let write state be the permission state for a descriptor with the same
handle
, but whosemode
is "write
". If read state is
not"granteddenieddenied
", this descriptor’s permission state must beequal to"denied
".Otherwise, if read state
.is "prompt
" or write state is "prompt
", this descriptor’s permission state must be "prompt
".
-
-
Make these checks no longer associated with an entry. [whatwg/fs Issue #101]
- permission request algorithm
-
Given a
FileSystemPermissionDescriptor
desc and aPermissionStatus
status , run these steps:-
Run the default permission query algorithm on desc and status .
-
If status ’s
state
is not "prompt
", then abort these steps. -
Let settings be desc ["
handle
"]'s relevant settings object . -
Let global be settings ’s global object .
-
If global is not a
Window
, then throw a "SecurityError
"DOMException
. -
If global does not have transient activation , then throw a "
SecurityError
"DOMException
. -
If settings ’s origin is not same origin with settings ’s top-level origin , then throw a "
SecurityError
"DOMException
. -
Request permission to use desc .
-
Run the default permission query algorithm on desc and status .
Ideally this user activation requirement would be defined upstream. [WICG/permissions-request Issue #2]
-
FileSystemHandle
handle
and
a
FileSystemPermissionMode
mode
,
run
these
steps:
-
Let desc be a
FileSystemPermissionDescriptor
. -
Set desc ["
name
"] to "file-system
". -
Set desc ["
handle
"] to handle . -
Set desc ["
mode
"] to mode . -
Return desc ’s permission state .
FileSystemHandle
handle
and
a
FileSystemPermissionMode
mode
,
run
these
steps:
-
Let desc be a
FileSystemPermissionDescriptor
. -
Set desc ["
name
"] to "file-system
". -
Set desc ["
handle
"] to handle . -
Set desc ["
mode
"] to mode . -
Let status be the result of running create a PermissionStatus for desc .
-
Run the permission request algorithm for the "
file-system
" feature, given desc and status . -
Return desc ’s permission state .
2.3.
The
FileSystemHandle
interface
dictionary {
FileSystemHandlePermissionDescriptor = "read";FileSystemPermissionMode = "read"; }; [
mode Exposed =(Window ,Worker ),SecureContext ,Serializable ]partial interface FileSystemHandle {Promise <PermissionState >queryPermission (optional FileSystemHandlePermissionDescriptor = {});
descriptor Promise <PermissionState >requestPermission (optional FileSystemHandlePermissionDescriptor = {}); };
descriptor
2.3.1.
The
queryPermission()
method
-
status
=
await
handle
.
queryPermission
({mode
: "read
" })- status = await handle .
queryPermission()
- status = (await navigator.
permissions
.query
({name
: "file-system
",handle
: handle })).state
- status = await handle .
-
Queries the current state of the read permission of this handle. If this returns "
prompt
" the website will have to callrequestPermission()
before any operations on the handle can be done. If this returns "denied
" any operations will reject.Usually handles returned by the local file system handle factories will initially return "
granted
" for their read permission state, however other than through the user revoking permission, a handle retrieved from IndexedDB is also likely to return "prompt
". -
status
=
await
handle
.
queryPermission
({mode
: "readwrite
" })- status = (await navigator.
permissions
.query
({name
: "file-system
",handle
: handle ,mode
: "readwrite
" }).state
- status = (await navigator.
-
Queries the current state of the write permission of this handle. If this returns "
prompt
", attempting to modify the file or directory this handle represents will require user activation and will result in a confirmation prompt being shown to the user. However if the state of the read permission of this handle is also "prompt
" the website will need to callrequestPermission()
. There is no automatic prompting for read access when attempting to read from a file or directory. -
status
=
await
handle
.
queryPermission
({mode
: "write
" })- status = (await navigator.
permissions
.query
({name
: "file-system
",handle
: handle ,mode
: "write
" }).state
- status = (await navigator.
Queries the current state of the write permission of this handle. If this returns "
prompt
", attempting to modify the file or directory this handle represents will require user activation and will result in a confirmation prompt being shown to the user.
The
integration
with
the
permissions
API’s
query()
method
is
not
yet
implemented
in
Chrome.
queryPermission(
descriptor
)
method,
when
invoked,
must
run
these
steps:
-
Let result be a new promise .
-
Run the following steps in parallel :
-
Let state be the result of querying file system permission given this and descriptor ["
mode
"]. -
Resolve result with state .
-
-
Return result .
2.3.2.
The
requestPermission()
method
-
status
=
await
handle
.
requestPermission
({mode
: "read
" })- status = await handle .
requestPermission()
- status = await handle .
-
If the state of the read permission of this handle is anything other than "
prompt
", this will return that state directly. If it is "prompt
" however, user activation is needed and this will show a confirmation prompt to the user. The new read permission state is then returned, depending on the user’s response to the prompt. -
status
=
await
handle
.
requestPermission
({mode
: "readwrite
" }) -
If the state of the write permission of this handle is anything other than "
prompt
", this will return that state directly. If the status of the read permission of this handle is "denied
" this will return that.Otherwise the state of the write permission is "
prompt
" and this will show a confirmation prompt to the user. The new write permission state is then returned, depending on what the user selected. -
status
=
await
handle
.
requestPermission
({mode
: "write
" }) If the state of the write permission of this handle is anything other than "
prompt
", this will return that state directly. If it is "prompt
" however, user activation is needed and this will show a confirmation prompt to the user. The new write permission state is then returned, depending on what the user selected.
requestPermission(
descriptor
)
method,
when
invoked,
must
run
these
steps:
-
Let result be a new promise .
-
Run the following steps in parallel :
-
Let state be the result of requesting file system permission given this and descriptor ["
mode
"]. If that throws an exception, reject result with that exception and abort. -
Resolve result with state .
-
-
Return result .
3. Accessing Local File System
enum WellKnownDirectory {"desktop" ,"documents" ,"downloads" ,"music" ,"pictures" ,"videos" , };typedef (WellKnownDirectory or FileSystemHandle );
StartInDirectory dictionary {
FilePickerAcceptType USVString = "";
description record <USVString , (USVString or sequence <USVString >)>; };
accept dictionary {
FilePickerOptions sequence <FilePickerAcceptType >;
types boolean =
excludeAcceptAllOption false ;DOMString ;
id StartInDirectory ; };
startIn dictionary :
OpenFilePickerOptions FilePickerOptions {boolean =
multiple false ; };dictionary :
SaveFilePickerOptions FilePickerOptions {USVString ?; };
suggestedName dictionary {
DirectoryPickerOptions DOMString ;
id StartInDirectory ;
startIn = "read";FileSystemPermissionMode = "read"; }; [
mode SecureContext ]partial interface Window {Promise <sequence <FileSystemFileHandle >>showOpenFilePicker (optional OpenFilePickerOptions = {});
options Promise <FileSystemFileHandle >showSaveFilePicker (optional SaveFilePickerOptions = {});
options Promise <FileSystemDirectoryHandle >showDirectoryPicker (optional DirectoryPickerOptions = {}); };
options
The
showOpenFilePicker()
,
showSaveFilePicker()
and
showDirectoryPicker()
methods
are
together
known
as
the
local
file
system
handle
factories
.
Note: What is referred to as the "local file system" in this spec, does not have to strictly refer to the file system on the local device. What we call the local file system could just as well be backed by a cloud provider. For example on Chrome OS these file pickers will also let you pick files and directories on Google Drive.
In
Chrome
versions
earlier
than
85,
this
was
implemented
as
a
generic
chooseFileSystemEntries
method.
3.1. Local File System Permissions
The
fact
that
the
user
picked
the
specific
files
returned
by
the
local
file
system
handle
factories
in
a
prompt
should
be
treated
by
the
user
agent
as
the
user
intending
to
grant
read
access
to
the
website
for
the
returned
files.
As
such,
at
the
time
the
promise
returned
by
one
of
the
local
file
system
handle
factories
resolves,
permission
state
for
a
descriptor
with
handle
set
to
the
returned
handle,
and
mode
set
to
"
read
"
should
be
"
granted
".
Additionally
for
calls
to
showSaveFilePicker
the
permission
state
for
a
descriptor
with
handle
set
to
the
returned
handle,
and
mode
set
to
"
readwrite
"
should
be
"
granted
".
-
If environment ’s origin is an opaque origin , return a promise rejected with a "
SecurityError
"DOMException
. -
If environment ’s origin is not same origin with environment ’s top-level origin , return a promise rejected with a "
SecurityError
"DOMException
. -
Let global be environment ’s global object .
-
If global does not have transient activation , then throw a "
SecurityError
"DOMException
.
3.2. File picker options
3.2.1. Accepted file types
showOpenFilePicker(options)
and
showSaveFilePicker(options)
methods
accept
a
FilePickerOptions
argument,
which
lets
the
website
specify
the
types
of
files
the
file
picker
will
let
the
user
select.
Each
entry
in
types
specifies
a
single
user
selectable
option
for
filtering
the
files
displayed
in
the
file
picker.
Each
option
consists
of
an
optional
description
and
a
number
of
MIME
types
and
extensions
(specified
as
a
mapping
of
MIME
type
to
a
list
of
extensions).
If
no
description
is
provided
one
will
be
generated.
Extensions
have
to
be
strings
that
start
with
a
"."
and
only
contain
valid
suffix
code
points
.
Additionally
extensions
are
limited
to
a
length
of
16
code
points.
In addition to complete MIME types, "*" can be used as the subtype of a MIME type to match for example all image formats with "image/*".
Websites should always provide both MIME types and file extensions for each option. On platforms that only use file extensions to describe file types user agents can match on the extensions, while on platforms that don’t use extensions, user agents can match on MIME type.
By
default
the
file
picker
will
also
include
an
option
to
not
apply
any
filter,
letting
the
user
select
any
file.
Set
excludeAcceptAllOption
to
true
to
not
include
this
option
in
the
file
picker.
For example , the following options will let the user pick one of three different filters. One for text files (either plain text or HTML), one for images, and a third one that doesn’t apply any filter and lets the user select any file.
const options= { types
: [ { description
: 'Text Files' , accept
: { 'text/plain' : [ '.txt' , '.text' ], 'text/html' : [ '.html' , '.htm' ] } }, { description
: 'Images' , accept
: { 'image/*' : [ '.png' , '.gif' , '.jpeg' , '.jpg' ] } } ], };
On the other hand, the following example will only let the user select SVG files. The dialog will not show an option to not apply any filters.
const options= { types
: [ { accept
: { 'image/svg+xml' : '.svg' } }, ], excludeAcceptAllOption
: true };
FilePickerOptions
options
,
run
these
steps:
-
Let accepts options be a empty list of tuples consisting of a description and a filter.
-
For each type of options ["
types
"]:-
For each typeString → suffixes of type ["
accept
"]:-
Let parsedType be the result of parse a MIME type with typeString .
-
If parsedType ’s parameters are not empty, then throw a
TypeError
. -
If suffixes is a string:
-
Validate a suffix given suffixes .
-
-
Otherwise, for each suffix of suffixes :
-
Validate a suffix given suffix .
-
-
-
Let filter be these steps, given a filename (a string ) and a type (a MIME type ):
-
Let parsedType be the result of parse a MIME type with typeString .
-
Return
false
.
-
Let description be type ["
description
"]. -
If description is an empty string, set description to some user understandable string describing filter .
-
Append ( description , filter ) to accepts options .
-
-
If either accepts options is empty , or options ["
excludeAcceptAllOption
"] isfalse
:-
Let description be a user understandable string describing "all files".
-
Let filter be an algorithm that returns
true
. -
Append ( description , filter ) to accepts options .
-
-
-
Return accepts options .
-
If suffix does not start with ".", then throw a
TypeError
. -
If suffix contains any code points that are not valid suffix code points , then throw a
TypeError
. -
If suffix ’s length is more than 16, then throw a
TypeError
.
3.2.2. Starting Directory
id
and
startIn
fields
can
be
specified
to
suggest
the
directory
in
which
the
file
picker
opens.
If
neither
of
these
options
are
specified,
the
user
agent
remembers
the
last
directory
a
file
or
directory
was
picked
from,
and
new
pickers
will
start
out
in
that
directory.
By
specifying
an
id
the
user
agent
can
remember
different
directories
for
different
IDs
(user
agents
will
only
remember
directories
for
a
limited
number
of
IDs).
// If a mapping exists from this ID to a previousy picked directory, start in // this directory. Otherwise, a mapping will be created from this ID to the // directory of the resulting file picker invocation. const options= { id
: 'foo' , };
Specifying
startIn
as
a
FileSystemFileHandle
will
result
in
the
dialog
starting
in
the
parent
directory
of
that
file,
while
passing
in
a
FileSystemDirectoryHandle
will
result
in
the
dialog
to
start
in
the
passed
in
directory.
These
take
precedence
even
if
an
explicit
id
is
also
passed
in.
For
example,
given
a
FileSystemDirectoryHandle
project_dir
,
the
following
will
show
a
file
picker
that
starts
out
in
that
directory:
// The picker will open to the directory of |project_dir| regardless of whether // 'foo' has a valid mapping. const options= { id
: 'foo' , startIn
: | project_dir| , };
The
id
and
startIn
fields
control
only
the
directory
the
picker
opens
to.
In
the
above
example,
it
cannot
be
assumed
that
the
id
'foo'
will
map
to
the
same
directory
as
project_dir
once
the
file
picker
operation
has
completed.
Specifying
startIn
as
a
WellKnownDirectory
will
result
in
the
dialog
starting
in
that
directory,
unless
an
explicit
id
was
also
passed
in
which
has
a
mapping
to
a
valid
directory.
Below
is
an
example
of
specifying
both
an
id
and
startIn
as
a
WellKnownDirectory
.
If
there
is
an
existing
mapping
from
the
given
ID
to
a
path,
this
mapping
is
used.
Otherwise,
the
path
suggested
via
the
WellKnownDirectory
is
used.
// First time specifying the ID 'foo'. It is not mapped to a directory. // The file picker will fall back to opening to the Downloads directory. TODO: link this. const options= { id
: 'foo' , // Unmapped. startIn
: "
downloads " , // Start here. }; // Later... // The ID 'foo' might or might not be mapped. For example, the mapping for this ID // might have been evicted. const options= { id
: 'foo' , // Maybe mapped. If so, start here. startIn
: "
downloads " , // Otherwise, start here. };
The
startIn
and
id
options
were
first
introduced
in
Chrome
91.
A user agent holds a recently picked directory map , which is a map of origins to path id maps .
A path id map is a map of valid path ids to paths.
A valid path id is a string where each character is ASCII alphanumeric or "_" or "-".
To prevent a path id map from growing without a bound, user agents should implement some mechanism to limit how many recently picked directories will be remembered. This can for example be done by evicting least recently used entries. User agents should allow at least 16 entries to be stored in a path id map .
The
WellKnownDirectory
enum
lets
a
website
pick
one
of
several
well-known
directories.
The
exact
paths
the
various
values
of
this
enum
map
to
is
implementation-defined
(and
in
some
cases
these
might
not
even
represent
actual
paths
on
disk).
The
following
list
describes
the
meaning
of
each
of
the
values,
and
gives
possible
example
paths
on
different
operating
systems:
-
"desktop"
-
The user’s Desktop directory, if such a thing exists. For example this could be
C:\Documents and Settings\username\Desktop
,/Users/username/Desktop
, or/home/username/Desktop
. -
"documents"
-
Directory in which documents created by the user would typically be stored. For example
C:\Documents and Settings\username\My Documents
,/Users/username/Documents
, or/home/username/Documents
. -
"downloads"
-
Directory where downloaded files would typically be stored. For example
C:\Documents and Settings\username\Downloads
,/Users/username/Downloads
, or/home/username/Downloads
. -
"music"
-
Directory where audio files would typically be stored. For example
C:\Documents and Settings\username\My Documents\My Music
,/Users/username/Music
, or/home/username/Music
. -
"pictures"
-
Directory where photos and other still images would typically be stored. For example
C:\Documents and Settings\username\My Documents\My Pictures
,/Users/username/Pictures
, or/home/username/Pictures
. -
"videos"
-
Directory where videos/movies would typically be stored. For example
C:\Documents and Settings\username\My Documents\My Videos
,/Users/username/Movies
, or/home/username/Videos
. -
If id given, and is not a valid path id , then throw a
TypeError
. -
Let origin be environment ’s origin .
-
If startIn is a
FileSystemHandle
and startIn is not in a bucket file system :-
Let entry be the result of locating an entry given startIn ’s locator .
-
If entry is a file entry , return the path of entry ’s parent in the local file system.
-
If entry is a directory entry , return entry ’s path in the local file system.
-
-
If id is non-empty:
-
If recently picked directory map [ origin ] exists :
-
Let path map be recently picked directory map [ origin ].
-
If path map [ id ] exists , then return path map [ id ].
-
-
-
If startIn is a
WellKnownDirectory
:-
Return a user agent defined path corresponding to the
WellKnownDirectory
value of startIn .
-
-
If id is not specified, or is an empty string:
-
If recently picked directory map [ origin ] exists :
-
Let path map be recently picked directory map [ origin ].
-
If path map [""] exists , then return path map [""].
-
-
-
Return a default path in a user agent specific manner.
-
Let origin be environment ’s origin .
-
If recently picked directory map [ origin ] does not exist , then set recently picked directory map [ origin ] to an empty path id map .
-
If id is not specified, let id be an empty string.
-
Set recently picked directory map [ origin ][ id ] to the path on the local file system corresponding to entry , if such a path can be determined.
-
[
handle
]
=
await
window
.
showOpenFilePicker()
- [ handle ] = await window .
showOpenFilePicker
({multiple
: false }) - [ handle ] = await window .
-
Shows a file picker that lets a user select a single existing file, returning a handle for the selected file.
-
handles
=
await
window
.
showOpenFilePicker
({multiple
: true }) -
Shows a file picker that lets a user select multiple existing files, returning handles for the selected files.
Additional options can be passed to
showOpenFilePicker()
to indicate the types of files the website wants the user to select and the directory in which the file picker will open. See § 3.2 File picker options for details. -
Let environment be this ’s relevant settings object .
-
Let accepts options be the result of processing accept types given options .
-
Let starting directory be the result of determining the directory the picker will start in given options ["
id
"], options ["startIn
"], and environment . -
Let global be environment ’s global object .
-
Verify that environment is allowed to show a file picker .
-
Let p be a new promise .
-
Run the following steps in parallel :
-
Optionally, wait until any prior execution of this algorithm has terminated.
-
Let filePickerOptions be an empty map .
-
Set filePickerOptions ["multiple"] to options ["
multiple
"]. -
Let dismissed be the result of WebDriver BiDi file dialog opened with null and filePickerOptions .
-
If dismissed is false:
-
Display a prompt to the user requesting that the user pick some files. If filePickerOptions ["multiple"] is false, there must be no more than one file selected; otherwise any number may be selected.
The displayed prompt should let the user pick one of the accepts options to filter the list of displayed files. Exactly how this is implemented, and what this prompt looks like is implementation-defined .
When possible, this prompt should start out showing starting directory .
-
Wait for the user to have made their selection.
-
-
If dismissed is true or if the user dismissed the prompt without making a selection, reject p with an "
AbortError
"DOMException
and abort. -
Let entries be a list of file entries representing the selected files or directories.
-
Let result be a empty list .
-
For each entry of entries :
-
If entry is deemed too sensitive or dangerous to be exposed to this website by the user agent:
-
Inform the user that the selected files or directories can’t be exposed to this website.
-
At the discretion of the user agent, either go back to the beginning of these in parallel steps, or reject p with an "
AbortError
"DOMException
and abort.
-
-
Add a new
FileSystemFileHandle
associated with entry to result .
-
-
Remember a picked directory given options ["
id
"], entries [0] and environment . -
Perform the activation notification steps in global ’s browsing context .
Note: This lets a website immediately perform operations on the returned handles that might require user activation, such as requesting more permissions.
-
Resolve p with result .
-
-
Return p .
-
handle
=
await
window
.
showSaveFilePicker
( options ) -
Shows a file picker that lets a user select a single file, returning a handle for the selected file. The selected file does not have to exist already. If the selected file does not exist a new empty file is created before this method returns, otherwise the existing file is cleared before this method returned.
-
handle
=
await
window
.
showSaveFilePicker
({suggestedName
: "README.md" }) -
Shows a file picker with the suggested "README.md" file name pre-filled as the default file name to save as.
Additional options can be passed to
showSaveFilePicker()
to indicate the types of files the website wants the user to select and the directory in which the file picker will open. See § 3.2 File picker options for details. -
Let environment be this ’s relevant settings object .
-
Let accepts options be the result of processing accept types given options .
-
Let starting directory be the result of determining the directory the picker will start in given options ["
id
"], options ["startIn
"] and environment . -
Let global be environment ’s global object .
-
Verify that environment is allowed to show a file picker .
-
Let p be a new promise .
-
Run the following steps in parallel :
-
Optionally, wait until any prior execution of this algorithm has terminated.
-
Display a prompt to the user requesting that the user pick exactly one file. The displayed prompt should let the user pick one of the accepts options to filter the list of displayed files. Exactly how this is implemented, and what this prompt looks like is implementation-defined . If accepts options are displayed in the UI, the selected option should also be used to suggest an extension to append to a user provided file name, but this is not required. In particular user agents are free to ignore potentially dangerous suffixes such as those ending in
".lnk"
or".local"
.When possible, this prompt should start out showing starting directory .
If options ["
suggestedName
"] exists and is not null, the file picker prompt will be pre-filled with the options ["suggestedName
"] as the default name to save as. The interaction between thesuggestedName
and accepts options is implementation-defined . If thesuggestedName
is deemed too dangerous, user agents should ignore or sanitize the suggested file name, similar to the sanitization done when fetching something as a download .Note: A user agent could for example pick whichever option in accepts options that matches
suggestedName
as the default filter. -
Wait for the user to have made their selection.
-
If the user dismissed the prompt without making a selection, reject p with an "
AbortError
"DOMException
and abort. -
Let entry be a file entry representing the selected file.
-
If entry is deemed too sensitive or dangerous to be exposed to this website by the user agent:
-
Inform the user that the selected files or directories can’t be exposed to this website.
-
At the discretion of the user agent, either go back to the beginning of these in parallel steps, or reject p with an "
AbortError
"DOMException
and abort.
-
-
Set entry ’s binary data to an empty byte sequence .
-
Set result to a new
FileSystemFileHandle
associated with entry . -
Remember a picked directory given options ["
id
"], entry and environment . -
Perform the activation notification steps in global ’s browsing context .
Note: This lets a website immediately perform operations on the returned handles that might require user activation, such as requesting more permissions.
-
Resolve p with result .
-
-
Return p .
-
handle
=
await
window
.
showDirectoryPicker()
- handle = await window .
showDirectoryPicker()
({mode
: 'read' }) - handle = await window .
-
Shows a directory picker that lets the user select a single directory, returning a handle for the selected directory if the user grants read permission.
-
handle
=
await
window
.
showDirectoryPicker()
({mode
: 'readwrite' }) -
Shows a directory picker that lets the user select a single directory, returning a handle for the selected directory. The user agent can combine read and write permission requests on this handle into one subsequent prompt.
-
handle
=
await
window
.
showDirectoryPicker()
({mode
: 'write' }) Shows a directory picker that lets the user select a single directory, returning a handle for the selected directory if the user grants write permission.
-
Let environment be this ’s relevant settings object .
-
Let starting directory be the result of determining the directory the picker will start in given options ["
id
"], options ["startIn
"] and environment . -
Let global be environment ’s global object .
-
Verify that environment is allowed to show a file picker .
-
Let p be a new promise .
-
Run the following steps in parallel :
-
Optionally, wait until any prior execution of this algorithm has terminated.
-
Let filePickerOptions be an empty map .
-
Set filePickerOptions ["multiple"] to false.
-
Let dismissed be the result of WebDriver BiDi file dialog opened with null and filePickerOptions .
-
If dismissed is false:
-
Display a prompt to the user requesting that the user pick a directory.
When possible, this prompt should start out showing starting directory .
-
Wait for the user to have made their selection.
-
-
If dismissed is true or if the user dismissed the prompt without making a selection, reject p with an "
AbortError
"DOMException
and abort. -
Let entry be a directory entry representing the selected directory.
-
If entry is deemed too sensitive or dangerous to be exposed to this website by the user agent:
-
Inform the user that the selected files or directories can’t be exposed to this website.
-
At the discretion of the user agent, either go back to the beginning of these in parallel steps, or reject p with an "
AbortError
"DOMException
and abort.
-
-
Set result to a new
FileSystemDirectoryHandle
associated with entry . -
Remember a picked directory given options ["
id
"], entry and environment . -
Let desc be a
FileSystemPermissionDescriptor
. -
Set desc ["
name
"] to "file-system
". -
Set desc ["
handle
"] to result . -
Let status be the result of running create a PermissionStatus for desc .
-
Perform the activation notification steps in global ’s browsing context .
-
Request permission to use desc .
-
Run the default permission query algorithm on desc and status .
-
If status is not "
granted
", reject result with a "AbortError
"DOMException
and abort. -
Perform the activation notification steps in global ’s browsing context .
-
Resolve p with result .
-
-
Return p .
-
handle
=
await
item
.
getAsFileSystemHandle()
-
Returns a
FileSystemFileHandle
object if the dragged item is a file and aFileSystemDirectoryHandle
object if the dragged item is a directory. -
If the
DataTransferItem
object is not in the read/write mode or the read-only mode , return a promise resolved withnull
. -
If the the drag data item kind is not File , then return a promise resolved with
null
. -
Let p be a new promise .
-
Run the following steps in parallel :
-
Let entry be the file system entry representing the dragged file or directory.
-
If entry is a file entry :
-
Let handle be a
FileSystemFileHandle
associated with entry .
-
-
Else if entry is a directory entry :
-
Let handle be a
FileSystemDirectoryHandle
associated with entry .
-
-
Resolve p with entry .
-
-
Return p .
-
The directory or directories containing the user agent itself.
-
Directories where the user agent stores website storage .
-
Directories containing system files (such as
C:\Windows
on Windows). -
Directories such as
/dev/
,/sys
, and/proc
on Linux that would give access to low-level devices. -
A user’s entire "home" directory. Individual files and directories inside the home directory should still be allowed, but user agents should not generally let users give blanket access to the entire directory.
-
The default directory for downloads, if the user agent has such a thing. Individual files inside the directory again should be allowed, but the whole directory would risk leaking more data than a user realizes.
-
Files with names that end in
.lnk
, when selecting a file to write to. Writing to these files on Windows is similar to creating symlinks on other operating systems, and as such can be used to attempt to trick users into giving access to files they didn’t intend to expose. -
Files with names that end in
.local
, when selecting a file to write to. Windows uses these files to decide what DLLs to load, and as such writing to these files could be used to cause code to be executed.
StartInDirectory
startIn
and
an
environment
settings
object
environment
,
run
the
following
steps:
3.3.
The
showOpenFilePicker()
method
showOpenFilePicker(
options
)
method,
when
invoked,
must
run
these
steps:
3.4.
The
showSaveFilePicker()
method
The
suggestedName
option
was
first
introduced
in
Chrome
91.
showSaveFilePicker(
options
)
method,
when
invoked,
must
run
these
steps:
3.5.
The
showDirectoryPicker()
method
The
id
and
startIn
fields
behave
identically
to
the
id
and
startIn
fields,
respectively.
See
§ 3.2.2
Starting
Directory
for
details
on
how
to
use
these
fields.
showDirectoryPicker(
options
)
method,
when
invoked,
must
run
these
steps:
3.6. Drag and Drop
partial interface DataTransferItem {Promise <FileSystemHandle ?>getAsFileSystemHandle (); };
During a drag-and-drop operation , dragged file and directory items are associated with file entries and directory entries respectively.
The
getAsFileSystemHandle()
method
steps
are:
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 handleof fileHandlesPromises) { if ( handle. kind=== 'directory' ) { console. log( `Directory: ${ handle. name} ` ); } else { console. log( `File: ${ handle. name} ` ); } } });
This currently does not block access to too sensitive or dangerous directories, to be consistent with other APIs that give access to dropped files and directories. This is inconsistent with the local file system handle factories though, so we might want to reconsider this.
4. Accessibility Considerations
This section is non-normative.
When this specification is used to present information in the user interface, implementors will want to follow the OS level accessibility guidelines for the platform.
5. Privacy Considerations
This section is non-normative.
This
API
does
not
give
websites
any
more
read
access
to
data
than
the
existing
<input
type=file>
and
<input
type=file
webkitdirectory>
APIs
already
do.
Furthermore
similarly
to
those
APIs,
all
access
to
files
and
directories
is
explicitly
gated
behind
a
file
or
directory
picker.
There are however several major privacy risks with this new API:
5.1. Users giving access to more, or more sensitive files than they intended.
This isn’t a new risk with this API, but user agents should try to make sure that users are aware of what exactly they’re giving websites access to. This is particularly important when giving access to a directory, where it might not be immediately clear to a user just how many files actually exist in that directory.
A related risk is having a user give access to particularly sensitive data. This could include some of a user agent’s configuration data, network cache or cookie store, or operating system configuration data such as password files. To protect against this, user agents are encouraged to restrict which directories a user is allowed to select in a directory picker, and potentially even restrict which files the user is allowed to select. This will make it much harder to accidentally give access to a directory that contains particularly sensitive data. Care must be taken to strike the right balance between restricting what the API can access while still having the API be useful. After all, this API intentionally lets the user use websites to interact with some of their most private personal data.
Examples of directories that user agents might want to restrict as being too sensitive or dangerous include:
5.2. Websites trying to use this API for tracking.
This API could be used by websites to track the user across clearing browsing data. This is because, in contrast with existing file access APIs, user agents are able to grant persistent access to files or directories and can re-prompt. In combination with the ability to write to files, websites will be able to persist an identifier on the users' disk. Clearing browsing data will not affect those files in any way, making these identifiers persist through those actions.
This risk is somewhat mitigated by the fact that clearing browsing data will clear all handles that a website had persisted (for example in IndexedDB), so websites won’t have any handles to re-prompt for permission after browsing data was cleared. Furthermore user agents are encouraged to make it clear what files and directories a website has access to, and to automatically expire permission grants except for particularly well trusted origins (for example persistent permissions could be limited to "installed" web applications).
User agents also are encouraged to provide a way for users to revoke permissions granted. Clearing browsing data is expected to revoke all permissions as well.
5.3. First-party vs third-party contexts.
In
third-party
contexts
(e.g.
an
iframe
whose
origin
does
not
match
that
of
the
top-level
frame)
websites
can’t
gain
access
to
data
they
don’t
already
have
access
to.
This
includes
both
getting
access
to
new
files
or
directories
via
the
local
file
system
handle
factories
,
as
well
as
requesting
more
permissions
to
existing
handles
via
the
requestPermission
API.
Handles
can
also
only
be
post-messaged
to
same-origin
destinations.
Attempts
to
send
a
handle
to
a
cross-origin
destination
will
result
in
a
messageerror
event.
6. Security Considerations
This section is non-normative.
This API gives websites the ability to modify existing files on disk, as well as write to new files. This has a couple of important security considerations:
6.1. Malware
This API could be used by websites to try to store and/or execute malware on the users system. To mitigate this risk, this API does not provide any way to mark files as executable (on the other hand files that are already executable likely remain that way, even after the files are modified through this API). Furthermore user agents are encouraged to apply things like Mark-of-the-Web to files created or modified by this API.
Finally, user agents are encouraged to verify the contents of files modified by this API via malware scans and safe browsing checks, unless some kind of external strong trust relation already exists. This of course has effects on the performance characteristics of this API.
6.2. Ransomware attacks
Another risk factor is that of ransomware attacks. The limitations described above regarding blocking access to certain sensitive directories helps limit the damage such an attack can do. Additionally user agents can grant write access to files at whatever granularity they deem appropriate.
6.3. Filling up a users disk
Other than files in a bucket file system , files written by this API are not subject to storage quota . As such websites can fill up a users disk without being limited by quota, which could leave a users device in a bad state (do note that even with storage that is subject to storage quota it is still possible to fill up, or come close to filling up, a users disk, since storage quota in general is not dependent on the amount of available disk space).
Without
this
API
websites
can
write
data
to
disk
not
subject
to
quota
limitations
already
by
triggering
downloads
of
large
files
(potentially
created
client
side,
to
not
incur
any
network
overhead).
While
the
presence
of
truncate()
and
writing
at
a
potentially
really
large
offset
past
the
end
of
a
file
makes
it
much
easier
and
lower
cost
to
create
large
files,
on
most
file
systems
such
files
should
not
actually
take
up
as
much
disk
space
as
most
commonly
used
file
systems
support
sparse
files
(and
thus
wouldn’t
actually
store
the
NUL
bytes
generated
by
resizing
a
file
or
seeking
past
the
end
of
it).
Whatever mitigations user agents use to guard against websites filling up a disk via either quota managed storage or the existing downloads mechanism should also be employed when websites use this API to write to disk.