Document dialog

The AppStudioAppFramework provides a DocumentDialog component for selecting files from your device's local storage. This component is identical in functionality to the Qt Quick FileDialog component, containing the same properties and methods, but uses the native file selection dialog for all platforms instead of a custom file dialog on iOS and Android, allowing for better interaction with the operating system.

Browse files with document dialog

To use the DocumentDialog component, the only requirement is the open method. Enabling external storage permissions is also required for Android devices. The following code sample demonstrates a basic usage of DocumentDialog, including an option to enable the storage permission if it's not already enabled and logging potential errors in the console log.

Item {

    property bool storagePermissionGranted

    Component.onCompleted: {
        // Check if storage permission is granted (only required for Android)
        storagePermissionGranted = Permission.checkPermission(Permission.PermissionTypeStorage) === Permission.PermissionResultGranted
    }

    PermissionDialog {
        id: permissionDialog
        openSettingsWhenDenied: true
        permission: PermissionDialog.PermissionDialogTypeStorage

        onAccepted: {
            documentDialog.open()
            console.log("Permission accepted")
        }

        onRejected: {
            console.log("Permission rejected")
        }
    }

    Button {
        text: "Select document"
        onClicked: {
            if (documentDialog.supported) {
                if (storagePermissionGranted === false){
                    permissionDialog.open()
                }

                else (storagePermissionGranted === true){
                    documentDialog.open()
                }

            }
            else {
                console.log("Not Supported")
            }
        }
    }

        DocumentDialog {
                id: documentDialog

                onAccepted: {
                        console.log("selected file URL " , fileUrl)
                }

                onRejected: {
                        if (status == DocumentDialog.DocumentDialogCancelledByUser) {
                                // Cancelled By User
                        }
                        if (status == DocumentDialog.DocumentDialogPermissionDenied) {
                                // Permission Denied
                        }
                        if (status == DocumentDialog.DocumentDialogNotSupported) {
                                // Not Supported
                        }
                        if (status == DocumentDialog.DocumentDialogFileReadError) {
                                // File Read Error
                        }
                }
        }
}

Additional properties

The DocumentDialog component also provides a number of properties that can be used to alter the appearance and behavior of the resulting dialog. A full list of these properties can be found in the API reference, but the following code sample adds helpful properties that can be used for more specific file selection. Specifically, the title property is used to give the dialog box a title, the selectMultiple property allows you to provide multiple files, and the nameFilters property provides two filtering options, allowing you to either select from all files or only .jpg or .png files.

DocumentDialog {
        id: doc
        title: "Select an image"
        selectMultiple: true
        nameFilters: [ "Image files (*.jpg *.png)", "All files (*)" ]

        onAccepted: {
                console.log("selected file path " , filePath)
        }

        onRejected: {
                if (status == DocumentDialog.DocumentDialogCancelledByUser) {
                        // Cancelled By User
                }
                if (status == DocumentDialog.DocumentDialogPermissionDenied) {
                        // Permission Denied
                }
                if (status == DocumentDialog.DocumentDialogNotSupported) {
                        // Not Supported
                }
                if (status == DocumentDialog.DocumentDialogFileReadError) {
                        // File Read Error
                }
        }
}

The selectExisting and selectFolder properties can be used to change how you interact with the files. If selectExisting is set to false, you can use the dialog to create a file instead of selecting an existing one, and if the selectFolder property is set to true, you can select entire folders instead of only a file.