Important: Please read the Qt Code of Conduct -

Filebrowser using QML

  • Could some one please help me out in implementing Filebrowser in QML.
    Currently this is what is being done:


    int main(int argc, char *argv[])
    QApplication app(argc, argv);
    QFileSystemModel *model = new QFileSystemModel();
    QDeclarativeView view;
    QDeclarativeEngine *engine = view.engine();
    QDeclarativeContext *context = view.rootContext();
    QObject rootObject = dynamic_cast<QObject>(view.rootObject());
    return app.exec();


    Rectangle {

        width: 840
        height: 240
        x: 0
        y: 100
       ListView {
             id: view
             width: 840
             height: 240
             highlight: Rectangle { color: "lightsteelblue"; radius: 5 }
             focus: true
             model: VisualDataModel {
                 model: qml_model
                 delegate: Rectangle {
                     width: 100; height: 100
                       Text  { text: fileName ;  anchors.horizontalCenter: parent.horizontalCenter }
                     MouseArea {
                         anchors.fill: parent
                         onClicked: {
                             if (model.hasModelChildren) {
                                 view.model.rootIndex = view.model.modelIndex(index)
                             else {
                                 console.log("no folders")


    The problem is i do not get to browse inside /home/user/ even if there are multiple folders.And my starting point is always '/' and not /home/user as I have mentioned in .cpp

    [EDIT: code formatting, please use @-tags, Volker]

  • Please format your code. Will help others to read and understand it better.

  • [Deleted duplicate content, fix the original post - there is an edit link below your username and avatar on every post or comment you write. Volker]

  • thanks .I think this post is really help full.

  • Hi,

    I'd suggest taking a look at the FolderListModel element if you haven't done so already ( You can find an example of its use in the qmlviewer application (the QML files are in the source tree under tools/qml/browser).

    In regards to model->setRootPath("/home/user/"), from the documentation it looks like this function only determines what directory is watched by the model for changes, and doesn't impact what is exposed to/shown by the view (rootIndex needs to be set for that).


  • I am assuming this is the dialog used on the qmlviewer application when file--> open is selected?

  • [quote author="kyleplattner" date="1296434643"]I am assuming this is the dialog used on the qmlviewer application when file--> open is selected?[/quote]

    It depends on the platform as to what qmlviewer shows by default. You can explicitly turn on the QML-based file browser by passing -qmlbrowser to qmlviewer.


  • Thanks alot with folder list model as an example my sample is now working

  • An issue which actually occurred now is when I create a new folder or file it does not refresh at that time but need to reopen my sample again.

    Is there a way to refresh or we need to implement a separate button for it?

  • It's strange because: QFileSystemModel keeps a cache with file information. The cache is automatically kept up to date using the QFileSystemWatcher.

  • Yes using QFileSysytemModel it works but currently I am using QML (folderlist model)
    where I am actually setting the folder path as we go into the folders but still it does not work

  • I have actually raised a bug for the issue

Log in to reply