Window: showSaveFilePicker() method
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Secure context: This feature is available only insecure contexts (HTTPS), in some or allsupporting browsers.
Experimental:This is anexperimental technology
Check theBrowser compatibility table carefully before using this in production.
TheshowSaveFilePicker() method of theWindow interface shows a file picker that allows a user to save a file.Either by selecting an existing file, or entering a name for a new file.
Syntax
showSaveFilePicker()showSaveFilePicker(options)Parameters
optionsOptionalAn object containing options, which are as follows:
excludeAcceptAllOptionOptionalA boolean value that defaults to
false. By default, the picker should include an option to not applyany file type filters (instigated with the type option below). Setting this optiontotruemeans that option isnot available.idOptionalBy specifying an ID, the browser can remember different directories for differentIDs. If the same ID is used for another picker, the picker opens in the samedirectory.
startInOptionalA
FileSystemHandleor a well known directory ("desktop","documents","downloads","music","pictures", or"videos") to open the dialog in.suggestedNameOptionalA
String. The suggested file name.typesOptionalAn
Arrayof allowed file types to save. Eachitem is an object with the following options:descriptionOptionalAn optional description of the category of filestypes allowed. Defaults to an empty string.
acceptAn
Objectwith the keys set to theMIME type and the values anArrayof file extensions (see belowfor an example).
Return value
APromise whose fulfillment handler receives aFileSystemFileHandle object.
Exceptions
AbortErrorDOMExceptionThrown if the user dismisses the file picker without selecting or inputting a file,or if the user agent deems any selected files too sensitive or dangerous.
SecurityErrorDOMExceptionThrown if the call was blocked by thesame-origin policy or it was not called via a user interaction such as a button press.
TypeErrorThrown if accept types can't be processed, which may happen if:
- Any key string of the
acceptoptions of any item intypesoptions can't parse a valid MIME type. - Any value string(s) of the
acceptoptions of any item intypesoptions is invalid, for example, if it does not start with.and if end with., or if it contains any invalid code points and its length is more than 16. - The
typesoptions is empty and theexcludeAcceptAllOptionoptions istrue.
- Any key string of the
Security
Transient user activation is required. The user has to interact with the page or a UI element in order for this feature to work.
Examples
The following function shows a file picker, with text files highlighted for selection.
async function getNewFileHandle() { const opts = { types: [ { description: "Text file", accept: { "text/plain": [".txt"] }, }, ], }; return await window.showSaveFilePicker(opts);}Specifications
| Specification |
|---|
| File System Access # api-showsavefilepicker |