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
Qt Code: 
  1. import QtQuick 2.0
  2.     import QtQuick.Dialogs 1.0          // FileDialog
  3.     import Qt.labs.folderlistmodel 2.1  // FolderListModel
  4.  
  5.     Item
  6.     {
  7.         id: head
  8.         property url path
  9.  
  10.         property int i: 0
  11.  
  12.         height: 500; width: 500
  13.         FileDialog
  14.         {
  15.             id:             photoDirectoryFileDialog
  16.             title:          "Select the photo directory:"
  17.             selectFolder:   true
  18.             visible:        true
  19.             height:         parent.height; width: parent.width
  20.             onAccepted:     head.path = fileUrl
  21.         }
  22.  
  23.         ListView
  24.         {
  25.             FolderListModel
  26.             {
  27.                 id: folderModel
  28.                 folder: photoDirectoryFileDialog.fileUrl
  29.                 nameFilters: ["*.jpg"]
  30.             }
  31.  
  32.             Component
  33.             {
  34.                 id: fileDelegate
  35.                 Text { text: fileName }
  36.             }
  37.  
  38.             model:    folderModel
  39.             delegate: fileDelegate
  40.         }
  41.  
  42.         // Show photos
  43.         Image
  44.         {
  45.             id: image
  46.             source: ""
  47.         }
  48.  
  49.         MouseArea
  50.         {
  51.             anchors.fill: parent
  52.             onClicked:
  53.             {
  54.                 console.log ("fsdfsdf: " + i + " --- " + photoDirectoryFileDialog.fileUrl + "/" + folderModel.get (i, folderModel.fileName))
  55.                 image.source = photoDirectoryFileDialog.fileUrl + "/" + folderModel.get (i, folderModel.folder.fileName)
  56.                 i++
  57.             }
  58.         }
  59.     }
To copy to clipboard, switch view to plain text mode 

----------


main.qml

Qt Code: 
  1. import QtQuick 2.4
  2.     import QtQuick.Window 2.2
  3.  
  4.     Window
  5.     {
  6.         id: rootWindow
  7.         visible: true
  8.         height: 700; width: height
  9.  
  10.         PhotoViewer
  11.         {
  12.             height: rootWindow.height; width: rootWindow.width
  13.         }    
  14.     }
To copy to clipboard, switch view to plain text mode 


Output:
Qt Code: 
  1. QML debugging is enabled. Only use this in a safe environment.
  2.     qml: fsdfsdf: 0 --- file:///home/***/Pictures/Wallpapers/undefined
  3.     qrc:/PhotoViewer.qml:43:5: QML Image: Cannot open: file:///home/***/Pictures/Wallpapers/undefined
  4.     qml: fsdfsdf: 1 --- file:///home/***/Pictures/Wallpapers/undefined
  5.     qml: fsdfsdf: 2 --- file:///home/***/Pictures/Wallpapers/undefined
To copy to clipboard, switch view to plain text mode 

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?