The AppStudio AppFramework provides a Document component for selecting files from your device's local storage. This component is identical in functionality to the Qt Quick File 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 Document 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 Document , 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 Document 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 select property allows you to provide multiple files, and the name 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 select and select properties can be used to change how you interact with the files. If select is set to false, you can use the dialog to create a file instead of selecting an existing one, and if the select property is set to true, you can select entire folders instead of only a file.