How to append and make visible multiple FileDialog files in listView?

Question

My problem is when i select single image using fileDialog , the image item rectangle gets visible in ListView but image itself is not visible.Also when i select multiple images , only single image item is added in ListView.

I want to append and make visible single and multiple images upon selecting from FileDialog into ListView and ListView model.

Here is my code

      FileDialog {
                id: fileDialog
                title: "Please choose a file"
                selectExisting: true
                selectMultiple: true
                onAccepted: {
                    var path
                    console.log("You chose: " + fileDialog.fileUrls)
                    mod.append({"fileUrl": fileDialog.fileUrls.toString()})
                                       }
                onRejected: {
                           Qt.quit()
                }
            }

This is ListModel and ListView code

ListModel{
        id: mod
    }
    Item{
        id:listviewrec
        width: 120
        height: 652
        visible: true
        anchors.right: root.right
        y :80
        ListView{
            id:modlistview
            x: 3
            boundsBehavior: Flickable.StopAtBounds
            highlightRangeMode: ListView.StrictlyEnforceRange
            clip: true
            flickableDirection: Flickable.VerticalFlick
            spacing:25
            model:mod
            delegate: delegateimage
            orientation: Qt.Vertical
            anchors.fill: listviewrec
        }

And this is how i am delegating the image

 Component{

        id:delegateimage
        Item{
            id:imageitem
            width:60
          height:70
         Rectangle{
                id:imagerec
                x:24
                y:10
                width: 66
                height:77
                border.color: "#7CC7FF"
                color: "transparent"
                border.width: 3
                radius: 2
                visible:true
                Image{
                    id : img
                    x: 4
                    y: 4
                    height : 69
                    visible: true
                   width : 59
                  function upload(){
                          for(var i = 0; i<fileDialog.fileUrls.length ; i++){
                           mod.append({"fileUrl": fileDialog.fileUrls[i].toString()})
                          img.source = fileDialog.fileUrl
                      }
                        }

This is how it shows

https://drive.google.com/file/d/0Bz-y0XAfUMXHNGJfNTBVNnB6MXM/view?usp=sharing

Answer 1

FileDialog.fileUrls is a list of selected files. You should append all files in the list to model instead of append the string of fileUrls:

FileDialog {
    onAccepted: {
        for (var index = 0; index < fileUrls.length; index++){
            mod.append({"fileUrl": fileDialog.fileUrls[index]});
        }
    }
}

Now, the ListModel mod stores the selected files in fileUrl role. Access the role in delegate to show the image:

Component {
    id:delegateimage
    Item {
        //...
        Rectangle {
            //...
            Image {
                //...
                source: fileUrl
            }
        }
    }
}