Local files

Is it also possible to load local (XML/JSON) files using the XMLHttpRequest. For example a local file named “colors.json” can be loaded using:

  1. xhr.open("GET", "colors.json");

We use this to read a color table and display it as a grid. It is not possible to modify the file from the Qt Quick side. To store data back to the source we would need a small REST based HTTP server or a native Qt Quick extension for file access.

  1. import QtQuick
  3. Rectangle {
  4.     width: 360
  5.     height: 360
  6.     color: '#000'
  8.     GridView {
  9.         id: view
  10.         anchors.fill: parent
  11.         cellWidth: width/4
  12.         cellHeight: cellWidth
  13.         delegate: Rectangle {
  14.             width: view.cellWidth
  15.             height: view.cellHeight
  16.             color: modelData.value
  17.         }
  18.     }
  20.     function request() {
  21.         var xhr = new XMLHttpRequest();
  22.         xhr.onreadystatechange = function() {
  23.             if (xhr.readyState === XMLHttpRequest.HEADERS_RECEIVED) {
  24.                 print('HEADERS_RECEIVED')
  25.             } else if(xhr.readyState === XMLHttpRequest.DONE) {
  26.                 print('DONE');
  27.                 var obj = JSON.parse(xhr.responseText.toString());
  28.                 view.model = obj.colors
  29.             }
  30.         }
  31.         xhr.open("GET", "colors.json");
  32.         xhr.send();
  33.     }
  35.     Component.onCompleted: {
  36.         request()
  37.     }
  38. }

TIP

For this to work, the QML_XHR_ALLOW_FILE_READ must be set and enabled (set to 1). You can do so by running:

  1. QML_XHR_ALLOW_FILE_READ=1 qml -f localfiles.qml

The issue is when allowing a QML application to read local files through an XMLHttpRequest, hence XHR, this opens up the entire file system for reading, which is a potential security issue. Qt will allow you to read local files only if the environment variable is set, so that this is a concious decision.

Instead of using the XMLHttpRequest it is also possible to use the XmlListModel to access local files.

  1. import QtQuick
  2. import QtQml.XmlListModel
  4. Rectangle {
  5.     width: 360
  6.     height: 360
  7.     color: '#000'
  9.     GridView {
  10.         id: view
  11.         anchors.fill: parent
  12.         cellWidth: width/4
  13.         cellHeight: cellWidth
  14.         model: xmlModel
  15.         delegate: Rectangle {
  16.             width: view.cellWidth
  17.             height: view.cellHeight
  18.             color: model.value
  19.             Text { 
  20.                 anchors.centerIn: parent
  21.                 text: model.name
  22.             }
  23.         }
  24.     }
  26.     XmlListModel {
  27.         id: xmlModel
  28.         source: "colors.xml"
  29.         query: "/colors/color"
  30.         XmlListModelRole { name: 'name'; elementName: 'name' }
  31.         XmlListModelRole { name: 'value'; elementName: 'value' }
  32.     }
  33. }

With the XmlListModel it is only possible to read XML files and not JSON files.