How to get an image that dragged and dropped from the browser to the DropArea QML component

Pater Mark

I'm using the DropArea component to transfer files using the Drag&Drop mechanism to my application. The following test code works fine with files located on the system:

import QtQuick 2.15
import QtQuick.Window 2.15

Window {
    id: root
    width: 640
    height: 480
    visible: true

    DropArea {
        id: dropArea
        anchors.fill: parent
        onEntered: {
            drag.accepted = drag.hasUrls
        }
        onDropped: {
            // Use files through drop.urls
            drop.accept()
        }
    }
}

In onEntered I accept the DragEvent if it contains urls, and in onDropped I can use urls to work with dropped files.

But also I need to accept images from the browser through DropArea. At the same time, since the images dragged from the browser do not exist in the file system, I expect to receive raw image data with which I create the image file myself.

The problem is that the DragEvent drop from dropped signal does not have such data. This can be verified with the following logging:

onDropped: {
    console.log("drop.urls: " + drop.urls)
    console.log("drop.html: " + drop.html)
    console.log("drop.text: " + drop.text)
    console.log("-----------------------")

    for (var i = 0; i < drop.formats.length; ++i) {
        console.log(drop.formats[i] + ": " + drop.getDataAsString(drop.formats[i]))
    }
}

that will give the following information (dragged and dropped the Qt logo image from the documentation):

qml: drop.urls: https://doc.qt.io/
qml: drop.html: <html>
<body>
<!--StartFragment--><img src="https://doc.qt.io/style/qt-logo-documentation.svg" alt="Qt documentation"><!--EndFragment-->
</body>
</html>
qml: drop.text: https://doc.qt.io/
qml: -----------------------
qml: application/x-qt-windows-mime;value="DragContext": 
qml: application/x-qt-windows-mime;value="DragImageBits": ?
qml: application/x-qt-windows-mime;value="chromium/x-renderer-taint": 
qml: application/x-qt-windows-mime;value="FileGroupDescriptorW": 
qml: application/x-qt-windows-mime;value="FileContents": 
qml: text/x-moz-url: h
qml: text/uri-list: https://doc.qt.io/
qml: application/x-qt-windows-mime;value="UniformResourceLocatorW": h
qml: text/plain: https://doc.qt.io/
qml: text/html: <html>
<body>
<!--StartFragment--><img src="https://doc.qt.io/style/qt-logo-documentation.svg" alt="Qt documentation"><!--EndFragment-->
</body>
</html>

Among the available properties (including those obtained through formats), there is no raw image data. drop.html provides useful information about the address of the dropped image, but is it really the only way to get an image is to download it using the received link?

I also thought about whether it is possible to somehow get QMimeData so that it can call imageData() and get the image in this way. I found a similar transfer of mime data to QML from the Krita developers (see DeclarativeMimeData* const m_data, which they define as Q_PROPERTY), but I'm not sure that this is the easiest, and most importantly, working way.

So to sum it up, is there a way to get the raw data of an image dragged and dropped from a browser or the image itself as a QImage, using the standard QML DropArea component?

p.s. The question was also asked on stackoverflow.