How to fetch files one by one from FolderListModel in QML?

Intention of the following code is to let the user select a folder of photos, and then display those photos one by one.

PhotoViewer.qml

import QtQuick 2.0
import QtQuick.Dialogs 1.0          // FileDialog
import Qt.labs.folderlistmodel 2.1  // FolderListModel

Item
{
    id: head
    property url path

    property int i: 0

    height: 500; width: 500
    FileDialog
    {
        id:             photoDirectoryFileDialog
        title:          "Select the photo directory:"
        selectFolder:   true
        visible:        true
        height:         parent.height; width: parent.width
        onAccepted:     head.path = fileUrl
    }

    ListView
    {
        FolderListModel
        {
            id: folderModel
            folder: photoDirectoryFileDialog.fileUrl
            nameFilters: ["*.jpg"]
        }

        Component
        {
            id: fileDelegate
            Text { text: fileName }
        }

        model:    folderModel
        delegate: fileDelegate
    }

    // Show photos
    Image
    {
        id: image
        source: ""
    }

    MouseArea
    {
        anchors.fill: parent
        onClicked:
        {
            console.log ("fsdfsdf: " + i + " --- " + photoDirectoryFileDialog.fileUrl + "/" + folderModel.get (i, folderModel.fileName))
            image.source = photoDirectoryFileDialog.fileUrl + "/" + folderModel.get (i, folderModel.folder.fileName)
            i++
        }
    }
}

main.qml

import QtQuick 2.4
import QtQuick.Window 2.2

Window
{
    id: rootWindow
    visible: true
    height: 700; width: height

    PhotoViewer
    {
        height: rootWindow.height; width: rootWindow.width
    }    
}

Output:

QML debugging is enabled. Only use this in a safe environment.
qml: fsdfsdf: 0 --- file:///home/***/Pictures/Wallpapers/undefined
qrc:/PhotoViewer.qml:43:5: QML Image: Cannot open: file:///home/***/Pictures/Wallpapers/undefined
qml: fsdfsdf: 1 --- file:///home/***/Pictures/Wallpapers/undefined
qml: fsdfsdf: 2 --- file:///home/***/Pictures/Wallpapers/undefined

As you can see in the output, I am receiving "undefined" as file name in the output. How to fetch files one by one from FolderListModel in QML?

Answers


I am the OP of this thread, and I found that the problem was that I had forgotten that the second variable of the function get is a string.

That means that the property fileName has to be passed in "", as shown below.

In the following culprit code,

console.log ("fsdfsdf: " + i + " --- " + photoDirectoryFileDialog.fileUrl + "/" + folderModel.get (i, folderModel.fileName))
image.source = photoDirectoryFileDialog.fileUrl + "/" + folderModel.get (i, folderModel.folder.fileName)

folderModel.fileName and folderModel.folder.fileName have to replaced by "fileName":

console.log ("fsdfsdf: " + i + " --- " + photoDirectoryFileDialog.fileUrl + "/" + folderModel.get (i, "fileName"))
image.source = photoDirectoryFileDialog.fileUrl + "/" + folderModel.get (i, "fileName")

Fixed this up for you. 2 things, the FileDialog must be shown after setting the selectFolder property, so we do it on the onCompleted slot (This is from the FileDialog docs)

And fixed accessing the model item properties, using the more convenient fileURL property.

Also add a check so the i counter rolls over when hitting the end of the list.

import QtQuick 2.0
import QtQuick.Dialogs 1.0          // FileDialog
import Qt.labs.folderlistmodel 2.1  // FolderListModel

Item
{
    id: head

    property int i: 0

    height: 500; width: 500
    FileDialog
    {
        id:             photoDirectoryFileDialog
        title:          "Select the photo directory:"
        selectFolder:   true
        height:         parent.height; width: parent.width
        onAccepted: {
            console.log("selected folder: " + folder)
        }

        Component.onCompleted: visible = true
    }

    ListView
    {
        FolderListModel
        {
            id: folderModel
            folder: photoDirectoryFileDialog.folder
            nameFilters: ["*.jpg"]
        }

        Component
        {
            id: fileDelegate
            Text { text: fileName }
        }

        model:    folderModel
        delegate: fileDelegate
    }

    // Show photos
    Image
    {
        id: image
        source: ""
    }

    MouseArea
    {
        anchors.fill: parent
        onClicked:
        {
            console.log ("fsdfsdf: " + i + " --- " + folderModel.get (i, "fileURL"))
            image.source =  folderModel.get (i, "fileURL")
            if (++i == folderModel.count) i = 0
        }
    }
}

Need Your Help

Unexpected NullPointerException in SurfaceView-Thread on API-level 15

android multithreading surfaceview

I have programmed an App which I wanted to test on higher API-Levels for checking the compatibility. For API 10 (2.3.3) there were no problems, but as soon as I ran my app on API 15 (4.0.3) I got an