qml-image-filedialog-sample.qml

qml-image-filedialog-sample.qml

// This sample allows you to pick and view an image from your pictures folder

import QtQuick 2.7
import QtQuick.Controls 2.1
import QtQuick.Dialogs 1.2
import QtQuick.Layouts 1.3

Item {
    ColumnLayout {
        anchors.fill: parent
        anchors.margins: 10

        RowLayout {
            Layout.fillWidth: true

            TextField {
                id: textField
                Layout.fillWidth: true
                placeholderText: qsTr("Enter image's URL")
                wrapMode: Text.WrapAtWordBoundaryOrAnywhere
            }

            Button {
                text: "..."
                onClicked: fileDialog.open()
            }
        }

        Image {
            id: image
            Layout.fillWidth: true
            Layout.fillHeight: true
            source: textField.text
            fillMode: Image.PreserveAspectFit
        }
    }

    FileDialog {
        id: fileDialog
        folder: shortcuts.pictures
        onAccepted: textField.text = fileDialog.fileUrl
    }
}