What's the source in image in ListView QML

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(????)
} 
}
....

}

Does `source: modelData` work? – JarMan Oct 31 '20 at 18:19 — JarMan, Oct 31 '20 at 18:19
@JarMan no, I've tried to do this – appleKey Oct 31 '20 at 18:23 — appleKey, Oct 31 '20 at 18:23

score 1 · Accepted Answer · answered Oct 31 '20 at 19:15

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
        }
    }
}

answered Oct 31 '20 at 19:15

JarMan

7,589
1
10
25

it still doesn't work. I've tried to write `source: fileDialog.fileUrl` – appleKey Oct 31 '20 at 19:29
The error is: QML Image: Cannot open: file://////path... – appleKey Oct 31 '20 at 19:31
Prior to Qt 5.15, I think it’s supposed to be fileDialog.fileURL – JarMan Oct 31 '20 at 19:31
I've included the "Qt.labs.folderlistmodel 2.1" . It may be error from this? – appleKey Oct 31 '20 at 19:33
It seems like be a continue to my file path. fileDialog.fileUrl + "/" + fileName And I've succesfully tried to do this. )) – appleKey Oct 31 '20 at 19:52
Oh, actually, no. Your comment confused me but my code is correct. source should not be fileDialog.fileUrl, it should be folderModel.fileUrl, like I wrote it. – JarMan Oct 31 '20 at 20:13

score 1 · Answer 2 · answered Nov 02 '20 at 17:47

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})/, "");
    }
}

What's the source in image in ListView QML

2 Answers2