What's the source in image in ListView QML - qt

Question

I need to realise list of images, which are chosen by user (folder) and implemet it in a list.
I have some trouble with source in object Image. In this way I see in console "You chose path..", but my images doesn't appear. Why? What's the right path for source?
The path isn't static because the user choose a folder with many pictures in it, so what should I do?
ApplicationWindow {
id:window;
visible: true
FileDialog {
id: fileDialog;
nameFilters: ["Image files (*.jpg *.png *.jpeg)"]
selectFolder: true;
onAccepted{
console.log("You chose " + fileDialog.fileUrl
}
listView.model = fileDialog.fileUrls;
}
......
ListView {
id: listView
visible: true;
orientation: Qt.Vertical
delegate: {
Image{
id: img
width: 40
height:40
source: model(????)
}
}
....
}

Answer 1

I think you misunderstood what fileDialog.fileUrls gives you. It doesn't give you a list of files in the folder that you chose. It gives you a list of the files or folders that you selected. You still need to search the directory for the files that you want. Thankfully, Qt provides a FolderListModel to do that. So here's a cleaned up example that does this:
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.15
import QtQuick.Dialogs 1.2
import Qt.labs.folderlistmodel 2.15
Window {
id: window
width: 640
height: 480
visible: true
Button {
id: btn
text: "Open"
onClicked: fileDialog.open();
}
FileDialog {
id: fileDialog;
selectFolder: true;
onAccepted: folderModel.folder = fileDialog.fileUrl;
}
ListView {
id: listView
anchors.top: btn.bottom
width: 200
height: 400
model: FolderListModel {
id: folderModel
nameFilters: ["*.jpg", "*.png", "*.jpeg"]
showDirs: false
}
delegate: Image {
id: img
width: 40
height: 40
source: fileUrl
}
}
}

Answer 2

First you need add the url paths to the model and then use it. Take care about the file prefix. Something like this :
FileDialog {
id: fileDialog;
selectFolder: true;
onAccepted: updateFiles(fileDialog.files)
}
ListView {
id: listView
anchors.top: btn.bottom
width: 200
height: 400
model: FolderListModel {
id: folderModel
}
delegate: Image {
id: img
width: 40
height: 40
source: listView.model.get(index).fileUrl
}
}
function updateFiles(fileList){
console.log(fileList)
console.log("You chose file(s): " + fileList.fileUrls)
console.log("Num files: " + fileList.length)
for(var i = 0; i < fileList.length; i++){
var path = fileList[i];
path = stripFilePrefix(path);
var newFileUrl = {
"fileUrl": path
};
folderModel.append(newFileUrl);
}
}
function stripFilePrefix(filePath) {
if (Qt.platform.os === "windows") {
return filePath.replace(/^(file:\/{3})|(file:)|(qrc:\/{3})|(http:\/{3})/, "")
}
else {
return filePath.replace(/^(file:\/{2})|(qrc:\/{2})|(http:\/{2})/, "");
}
}