dialog
Native system dialogs for opening and saving files.
This package is also accessible with window.__TAURI__.dialog
when build.withGlobalTauri
in tauri.conf.json
is set to true
.
The APIs must be added to tauri.allowlist.dialog
in tauri.conf.json
:
{
"tauri": {
"allowlist": {
"dialog": {
"all": true, // enable all dialog APIs
"ask": true, // enable dialog ask API
"confirm": true, // enable dialog confirm API
"message": true, // enable dialog message API
"open": true, // enable file open API
"save": true // enable file save API
}
}
}
}
It is recommended to allowlist only the APIs you use for optimal bundle size and security.
Interfaces
ConfirmDialogOptions
Properties
cancelLabel
Optional
cancelLabel:string
The label of the cancel button.
Defined in: dialog.ts:112
okLabel
Optional
okLabel:string
The label of the confirm button.
Defined in: dialog.ts:110
title
Optional
title:string
The title of the dialog. Defaults to the app name.
Defined in: dialog.ts:106
type
Optional
type:"info"
|"warning"
|"error"
The type of the dialog. Defaults to info
.
Defined in: dialog.ts:108
DialogFilter
Extension filters for the file dialog.
Since: 1.0.0
Properties
extensions
extensions:
string
[]
Extensions to filter, without a .
prefix.
Example
extensions: ['svg', 'png']
Defined in: dialog.ts:48
name
name:
string
Filter name.
Defined in: dialog.ts:40
MessageDialogOptions
Since: 1.0.0
Properties
okLabel
Optional
okLabel:string
The label of the confirm button.
Defined in: dialog.ts:101
title
Optional
title:string
The title of the dialog. Defaults to the app name.
Defined in: dialog.ts:97
type
Optional
type:"info"
|"warning"
|"error"
The type of the dialog. Defaults to info
.
Defined in: dialog.ts:99
OpenDialogOptions
Options for the open dialog.
Since: 1.0.0
Properties
defaultPath
Optional
defaultPath:string
Initial directory or file path.
Defined in: dialog.ts:62
directory
Optional
directory:boolean
Whether the dialog is a directory selection or not.
Defined in: dialog.ts:66
filters
Optional
filters:DialogFilter
[]
The filters of the dialog.
Defined in: dialog.ts:60
multiple
Optional
multiple:boolean
Whether the dialog allows multiple selection or not.
Defined in: dialog.ts:64
recursive
Optional
recursive:boolean
If directory
is true, indicates that it will be read recursively later.
Defines whether subdirectories will be allowed on the scope or not.
Defined in: dialog.ts:71
title
Optional
title:string
The title of the dialog window.
Defined in: dialog.ts:58
SaveDialogOptions
Options for the save dialog.
Since: 1.0.0
Properties
defaultPath
Optional
defaultPath:string
Initial directory or file path. If it's a directory path, the dialog interface will change to that folder. If it's not an existing directory, the file name will be set to the dialog's file name input and the dialog will be set to the parent folder.
Defined in: dialog.ts:89
filters
Optional
filters:DialogFilter
[]
The filters of the dialog.
Defined in: dialog.ts:83
title
Optional
title:string
The title of the dialog window.
Defined in: dialog.ts:81
Functions
ask
ask(
message
:string
,options?
:string
|ConfirmDialogOptions
):Promise
<boolean
>
Shows a question dialog with Yes
and No
buttons.
Example
import { ask } from '@tauri-apps/api/dialog';
const yes = await ask('Are you sure?', 'Tauri');
const yes2 = await ask('This action cannot be reverted. Are you sure?', { title: 'Tauri', type: 'warning' });
Since: 1.0.0
Parameters
Name | Type | Description |
---|---|---|
message | string | The message to show. |
options? | string | ConfirmDialogOptions | The dialog's options. If a string, it represents the dialog title. |
Returns: Promise
<boolean
>
A promise resolving to a boolean indicating whether Yes
was clicked or not.
confirm
confirm(
message
:string
,options?
:string
|ConfirmDialogOptions
):Promise
<boolean
>
Shows a question dialog with Ok
and Cancel
buttons.
Example
import { confirm } from '@tauri-apps/api/dialog';
const confirmed = await confirm('Are you sure?', 'Tauri');
const confirmed2 = await confirm('This action cannot be reverted. Are you sure?', { title: 'Tauri', type: 'warning' });
Since: 1.0.0
Parameters
Name | Type | Description |
---|---|---|
message | string | The message to show. |
options? | string | ConfirmDialogOptions | The dialog's options. If a string, it represents the dialog title. |
Returns: Promise
<boolean
>
A promise resolving to a boolean indicating whether Ok
was clicked or not.
message
message(
message
:string
,options?
:string
|MessageDialogOptions
):Promise
<void
>
Shows a message dialog with an Ok
button.
Example
import { message } from '@tauri-apps/api/dialog';
await message('Tauri is awesome', 'Tauri');
await message('File not found', { title: 'Tauri', type: 'error' });
Since: 1.0.0
Parameters
Name | Type | Description |
---|---|---|
message | string | The message to show. |
options? | string | MessageDialogOptions | The dialog's options. If a string, it represents the dialog title. |
Returns: Promise
<void
>
A promise indicating the success or failure of the operation.
open
open(
options?
:OpenDialogOptions
):Promise
<null
|string
|string
[]>
Open a file/directory selection dialog.
The selected paths are added to the filesystem and asset protocol allowlist scopes. When security is more important than the easy of use of this API, prefer writing a dedicated command instead.
Note that the allowlist scope change is not persisted, so the values are cleared when the application is restarted. You can save it to the filesystem using tauri-plugin-persisted-scope.
Example
import { open } from '@tauri-apps/api/dialog';
// Open a selection dialog for image files
const selected = await open({
multiple: true,
filters: [{
name: 'Image',
extensions: ['png', 'jpeg']
}]
});
if (Array.isArray(selected)) {
// user selected multiple files
} else if (selected === null) {
// user cancelled the selection
} else {
// user selected a single file
}
Example
import { open } from '@tauri-apps/api/dialog';
import { appDir } from '@tauri-apps/api/path';
// Open a selection dialog for directories
const selected = await open({
directory: true,
multiple: true,
defaultPath: await appDir(),
});
if (Array.isArray(selected)) {
// user selected multiple directories
} else if (selected === null) {
// user cancelled the selection
} else {
// user selected a single directory
}
Since: 1.0.0
Parameters
Name | Type |
---|---|
options | OpenDialogOptions |
Returns: Promise
<null
| string
| string
[]>
A promise resolving to the selected path(s)
save
save(
options?
:SaveDialogOptions
):Promise
<string
|null
>
Open a file/directory save dialog.
The selected path is added to the filesystem and asset protocol allowlist scopes. When security is more important than the easy of use of this API, prefer writing a dedicated command instead.
Note that the allowlist scope change is not persisted, so the values are cleared when the application is restarted. You can save it to the filesystem using tauri-plugin-persisted-scope.
Example
import { save } from '@tauri-apps/api/dialog';
const filePath = await save({
filters: [{
name: 'Image',
extensions: ['png', 'jpeg']
}]
});
Since: 1.0.0
Parameters
Name | Type |
---|---|
options | SaveDialogOptions |
Returns: Promise
<string
| null
>
A promise resolving to the selected path.