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

robro

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.

raven-worx

@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"
        }
}

Yaswanth

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.

robro

@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! :-)