Skip to content
Tauri

@tauri-apps/plugin-dialog

Interfaces

ConfirmDialogOptions

Properties

PropertyTypeDescriptionDefined in
cancelLabel?stringThe label of the cancel button.Source: https://github.com/tauri-apps/plugins-workspace/blob/v2/plugins/dialog/guest-js/index.ts#L100
kind?"info" | "warning" | "error"The kind of the dialog. Defaults to info.Source: https://github.com/tauri-apps/plugins-workspace/blob/v2/plugins/dialog/guest-js/index.ts#L96
okLabel?stringThe label of the confirm button.Source: https://github.com/tauri-apps/plugins-workspace/blob/v2/plugins/dialog/guest-js/index.ts#L98
title?stringThe title of the dialog. Defaults to the app name.Source: https://github.com/tauri-apps/plugins-workspace/blob/v2/plugins/dialog/guest-js/index.ts#L94

DialogFilter

Extension filters for the file dialog.

Since

2.0.0

Properties

PropertyTypeDescriptionDefined in
extensionsstring[]Extensions to filter, without a . prefix. Example extensions: ['svg', 'png']Source: https://github.com/tauri-apps/plugins-workspace/blob/v2/plugins/dialog/guest-js/index.ts#L22
namestringFilter name.Source: https://github.com/tauri-apps/plugins-workspace/blob/v2/plugins/dialog/guest-js/index.ts#L14

MessageDialogOptions

Since

2.0.0

Properties

PropertyTypeDescriptionDefined in
kind?"info" | "warning" | "error"The kind of the dialog. Defaults to info.Source: https://github.com/tauri-apps/plugins-workspace/blob/v2/plugins/dialog/guest-js/index.ts#L87
okLabel?stringThe label of the confirm button.Source: https://github.com/tauri-apps/plugins-workspace/blob/v2/plugins/dialog/guest-js/index.ts#L89
title?stringThe title of the dialog. Defaults to the app name.Source: https://github.com/tauri-apps/plugins-workspace/blob/v2/plugins/dialog/guest-js/index.ts#L85

OpenDialogOptions

Options for the open dialog.

Since

2.0.0

Properties

PropertyTypeDescriptionDefined in
canCreateDirectories?booleanWhether to allow creating directories in the dialog. Enabled by default. macOS OnlySource: https://github.com/tauri-apps/plugins-workspace/blob/v2/plugins/dialog/guest-js/index.ts#L54
defaultPath?stringInitial 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. On mobile the file name is always used on the dialog’s file name input. If not provided, Android uses (invalid).txt as default file name.Source: https://github.com/tauri-apps/plugins-workspace/blob/v2/plugins/dialog/guest-js/index.ts#L43
directory?booleanWhether the dialog is a directory selection or not.Source: https://github.com/tauri-apps/plugins-workspace/blob/v2/plugins/dialog/guest-js/index.ts#L47
filters?DialogFilter[]The filters of the dialog.Source: https://github.com/tauri-apps/plugins-workspace/blob/v2/plugins/dialog/guest-js/index.ts#L34
multiple?booleanWhether the dialog allows multiple selection or not.Source: https://github.com/tauri-apps/plugins-workspace/blob/v2/plugins/dialog/guest-js/index.ts#L45
recursive?booleanIf directory is true, indicates that it will be read recursively later. Defines whether subdirectories will be allowed on the scope or not.Source: https://github.com/tauri-apps/plugins-workspace/blob/v2/plugins/dialog/guest-js/index.ts#L52
title?stringThe title of the dialog window (desktop only).Source: https://github.com/tauri-apps/plugins-workspace/blob/v2/plugins/dialog/guest-js/index.ts#L32

SaveDialogOptions

Options for the save dialog.

Since

2.0.0

Properties

PropertyTypeDescriptionDefined in
canCreateDirectories?booleanWhether to allow creating directories in the dialog. Enabled by default. macOS OnlySource: https://github.com/tauri-apps/plugins-workspace/blob/v2/plugins/dialog/guest-js/index.ts#L77
defaultPath?stringInitial 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. On mobile the file name is always used on the dialog’s file name input. If not provided, Android uses (invalid).txt as default file name.Source: https://github.com/tauri-apps/plugins-workspace/blob/v2/plugins/dialog/guest-js/index.ts#L75
filters?DialogFilter[]The filters of the dialog.Source: https://github.com/tauri-apps/plugins-workspace/blob/v2/plugins/dialog/guest-js/index.ts#L66
title?stringThe title of the dialog window (desktop only).Source: https://github.com/tauri-apps/plugins-workspace/blob/v2/plugins/dialog/guest-js/index.ts#L64

Type Aliases

OpenDialogReturn<T>

type OpenDialogReturn<T>: T["directory"] extends true ? T["multiple"] extends true ? string[] | null : string | null : T["multiple"] extends true ? string[] | null : string | null;

Type Parameters

Type Parameter
T extends OpenDialogOptions

Source: https://github.com/tauri-apps/plugins-workspace/blob/v2/plugins/dialog/guest-js/index.ts#L103

Functions

ask()

function ask(message, options?): Promise<boolean>

Shows a question dialog with Yes and No buttons.

Parameters

ParameterTypeDescription
messagestringThe message to show.
options?string | ConfirmDialogOptionsThe 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.

Example

import { ask } from '@tauri-apps/plugin-dialog';
const yes = await ask('Are you sure?', 'Tauri');
const yes2 = await ask('This action cannot be reverted. Are you sure?', { title: 'Tauri', kind: 'warning' });

Since

2.0.0

Source: https://github.com/tauri-apps/plugins-workspace/blob/v2/plugins/dialog/guest-js/index.ts#L251


confirm()

function confirm(message, options?): Promise<boolean>

Shows a question dialog with Ok and Cancel buttons.

Parameters

ParameterTypeDescription
messagestringThe message to show.
options?string | ConfirmDialogOptionsThe 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.

Example

import { confirm } from '@tauri-apps/plugin-dialog';
const confirmed = await confirm('Are you sure?', 'Tauri');
const confirmed2 = await confirm('This action cannot be reverted. Are you sure?', { title: 'Tauri', kind: 'warning' });

Since

2.0.0

Source: https://github.com/tauri-apps/plugins-workspace/blob/v2/plugins/dialog/guest-js/index.ts#L281


message()

function message(message, options?): Promise<void>

Shows a message dialog with an Ok button.

Parameters

ParameterTypeDescription
messagestringThe message to show.
options?string | MessageDialogOptionsThe dialog’s options. If a string, it represents the dialog title.

Returns

Promise<void>

A promise indicating the success or failure of the operation.

Example

import { message } from '@tauri-apps/plugin-dialog';
await message('Tauri is awesome', 'Tauri');
await message('File not found', { title: 'Tauri', kind: 'error' });

Since

2.0.0

Source: https://github.com/tauri-apps/plugins-workspace/blob/v2/plugins/dialog/guest-js/index.ts#L222


open()

function open<T>(options): Promise<OpenDialogReturn<T>>

Open a file/directory selection dialog.

The selected paths are added to the filesystem and asset protocol scopes. When security is more important than the easy of use of this API, prefer writing a dedicated command instead.

Note that the 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.

Type Parameters

Type Parameter
T extends OpenDialogOptions

Parameters

ParameterType
optionsT

Returns

Promise<OpenDialogReturn<T>>

A promise resolving to the selected path(s)

Examples

import { open } from '@tauri-apps/plugin-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
}
import { open } from '@tauri-apps/plugin-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

2.0.0

Source: https://github.com/tauri-apps/plugins-workspace/blob/v2/plugins/dialog/guest-js/index.ts#L163


save()

function save(options): Promise<string | null>

Open a file/directory save dialog.

The selected path is added to the filesystem and asset protocol scopes. When security is more important than the easy of use of this API, prefer writing a dedicated command instead.

Note that the 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.

Parameters

ParameterType
optionsSaveDialogOptions

Returns

Promise<string | null>

A promise resolving to the selected path.

Example

import { save } from '@tauri-apps/plugin-dialog';
const filePath = await save({
filters: [{
name: 'Image',
extensions: ['png', 'jpeg']
}]
});

Since

2.0.0

Source: https://github.com/tauri-apps/plugins-workspace/blob/v2/plugins/dialog/guest-js/index.ts#L197


© 2024 Tauri Contributors. CC-BY / MIT