Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

DropArea: How can I set allowed exensions of external files using the "keys" property?



  • Hello,

    I would like to use the keys property of a DropArea to accept only files with the extensions .bin and .hdr.

    I tried first to make it work with .jpg, but I have no clue how it works.

    This is one example, how it does not work:

    import QtQuick 2.9
    import QtQuick.Controls 2.2
    
    ApplicationWindow {
        visible: true
        width: 640
        height: 480
        title: qsTr("Hello World")
    
        DropArea {
            id: drop
            anchors.fill: parent
            enabled: true
            keys: ["image/jpg"] //No .jpg allowed on execution
            onEntered: {
                console.log("entered")
            }
            onExited: {
                console.log("excited")
            }
            onDropped: {
                console.log("dropped")
                console.log(drop.text)
            }
        }
    }
    

    How is the keys property used correct?

    Thank you very much.


  • Moderators

    @robro
    the keys property isn't right here. You need rather to do something like this:

    DropArea {
            id: drop
            anchors.fill: parent
    
            onEntered: {
                for(var i = 0; i < drag.urls.length; i++)
                {
                    if(validateFileExtension(drag.urls[i]))
                    {
                        drag.accept()
                        return // drag accepted
                     }
                }
            }
    
            function checkFileExtension(filePath) {
                return filePath.split('.').pop() == "jpg"
            }
    }
    


  • As per my observation keys works as following,
    What ever the keys you specified in the drop area, only those keys can be accessed in droparea.

    import QtQuick 2.9
    import QtQuick.Window 2.2
    
    Window {
        visible: true
        width: 640
        height: 480
        title: qsTr("Hello World")
    
        DropArea
        {
            width : 100
            height: 100
            anchors.right: parent.right
            keys:["textComp","imageComp"]
            onEntered:
            {
                console.log("Entered into the droparea")
            }
        }
    
        Text
        {
            id : textSample
            text : "This is sample Text"
            Drag.active: true
            Drag.keys:["textComp"]
            MouseArea
            {
                anchors.fill: parent
                drag.target: parent
            }
        }
    
        Rectangle
        {
            id : rect
            width: 50
            height: 50
            color: "RED"
            Drag.active: true
            Drag.keys:["rectComp"]
            MouseArea
            {
                anchors.fill: parent
                drag.target: parent
            }
        }
    
        Image
        {
            id : _image
            width: 50
            height: 50
            Drag.active: true
            Drag.keys:["imageComp"]
            source: "file:///D:/Sample.PNG"
            MouseArea
            {
                anchors.fill: parent
                drag.target: parent
            }
        }
    }
    

    What ever the key you specify for the QML elements only those which are matching in the list of the keys in drop area component can be detected. In the above only Image and text can be detected. In your case based on the file type have a flag and specify that flag in the keys in dropArea.



  • @raven-worx : Thank you very much!
    Your suggestion works fine :-)
    I just used the drop event instead of the drag event.

    @Yaswanth : Thanks for the information on how the keys property works! :-)


Log in to reply