Displaying multiple images using QML in GridView - qt

Question

I've used the file dialog to select multiple images like this :
FileDialog{
id: uploadFiles
title: "Please choose images for dimple detection"
selectMultiple: true
nameFilters: [ "Image files (*.jpg *.png *.tif)", "All files (*)" ]
onAccepted: {}
}
I know I can reach the file paths using:
uplaodFile.fileUrls
but how can I display them in a Flickable item using GridView ?
Edit :
This the full code of the page ...
import QtQuick 2.15
import QtQuick.Controls 2.15
import "../controls"
import QtQuick.Dialogs 1.3
Item {
property bool isGridViewVisiable: false
Rectangle {
id: bgHome
color: "#2c313c"
anchors.fill: parent
Flickable{
id: flickableUpload
anchors.fill: parent
clip: true
Text {
id: titleResults
x: 249
width: 347
height: 141
color: "#ffffff"
text: qsTr("Upload the images to here please :)")
anchors.verticalCenter: parent.verticalCenter
anchors.top: parent.top
font.pixelSize: 25
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
anchors.verticalCenterOffset: -110
anchors.horizontalCenterOffset: 8
anchors.topMargin: 59
anchors.horizontalCenter: parent.horizontalCenter
font.family: "Arial"
font.bold: true
minimumPointSize: 15
minimumPixelSize: 16
fontSizeMode: Text.Fit
}
UploadBtn{
id:uploadBtn
x: 285
y: 220
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
btnIconSource: "../../images/svg_images/upload-icon.svg"
onPressed: {
uploadFiles.open()
}
// opening a file dialog in order to upload the images
FileDialog{
id: uploadFiles
title: "Please choose images for dimple detection"
selectMultiple: true
nameFilters: [ "Image files (*.jpg *.png *.tif)", "All files (*)" ]
onAccepted: {
isGridViewVisiable = true
}
}
Component {
id: nameDelegate
Column {
Image {
id: delegateImage
anchors.horizontalCenter: delegateText.horizontalCenter
source: model; width: 256; height: 256; smooth: true
fillMode: Image.PreserveAspectFit
}
Text {
id: delegateText
text: model.name; font.pixelSize: 24
}
}
}
GridView{
id:gridView
visible: isGridViewVisiable
anchors.fill: parent
model:uploadFiles.fileUrls
delegate: nameDelegate
clip: true
}
}
ScrollBar.vertical: ScrollBar{}
}
}
This the full page that I will add to a content loader in the main qml file
PS:
the upload button is a customized button

Answer 1

uploadFiles.fileUrls is an array of filenames. So you can use that as a model for your GridView.
GridView {
model: uploadFiles.fileUrls
delegate: Image {
source: modelData
}
}
UPDATE:
It turns out there was a problem with my original answer, as well as with the code that you were trying.
First of all, you're making your GridView a child of your UploadBtn. Did you intend that? I think that will be too small of a space to draw your images.
But more importantly, the part that I was wrong about is that fileUrls is not an array of strings. It's a list<url>. I assumed QML would be smart enough to treat that the same as an array, or maybe implicitly convert it to an array if needed. But apparently I was wrong. So we'll just have to use it a little differently.
Flickable{
...
UploadBtn {
id:uploadBtn
...
FileDialog{
...
}
Component {
id: nameDelegate
Column {
Image {
...
// Access the list by index
source: uploadFiles.fileUrls[index]
}
Text {
...
text: uploadFiles.fileUrls[index]
}
}
}
}
// Move GridView outside of UploadBtn
GridView {
...
// Just use the length of the list as our model
model: uploadFiles.fileUrls.length
}
}