jQuery FileTree 2.1.x - default open folder

Question

I'm working on simple upload mechanism where user will be able to drop files over FileTree directories. I made it using jQuery FileTree and everything works great, except one thing. After upload I refresh FileTree to show user that file is indeed in destination folder. Unfortunately, if destination folder is not the main directory, but one of subdirs, user can see nothing, because directories are collapsed by default.

I was looking for solution for that problem: "How to get one or more directories expanded on reload" and have found only one interesting topic: jquery file tree - folder open by default? - It did resolve exactly the same problem, but only for very old version of iQuery FileTree and it doesn't work for recent one.

I spent hours trying to do similar modifications in recent version, but javascript used in jQuery FileTree is too advanced for me, and differences between old version and new version are to big to find any similarities.

If anyone know how to modify recent version of jQuery FileTree, please help me with it. Thanks.

score 0 · Answer 1 · answered Dec 19 '19 at 07:20

Check the complete example below on how to implement expanding of a specific folder after the plugin was initialized. It opens recursively all folders which are specified in path.

var folderToExpand = "/folder/path/to/expand";

$('.filetree').fileTree({
        root: fileRoot,
        script: scriptUrl,
        multiFolder: false
    })
    .on('filetreeexpanded', function (e, data) {
        // clean autoexpand folder and restore animation
        if (folderToExpand == data.rel) {
            folderToExpand = null;
            data.options.expandSpeed = 500;
        }
    })
    .on('afterShowTree', function (e, data) {
        if (folderToExpand !== null) {
            var $el = $(e.target),
                flag = false;
            $el.find(".directory.collapsed").each(function (i, folder) {
                var $link = $(folder).children();
                if (folderToExpand.indexOf($link.attr('rel')) === 0) {
                    flag = true;
                    data.options.expandSpeed = 0;
                    setTimeout(function () {
                        $link.click();
                    }, 50);
                }
            });
            // match not found
            if (flag === false) {
                folderToExpand = null;
                data.options.expandSpeed = 500;
            }
        }
    });

It is possible now to change animation and other options in events due to data.options that relates to plugin options.

A J · Accepted Answer · 2019-12-24T03:54:21.987

Ok, problem solved.

Erwan's code is correct and was helpful, but it didn't solve my problem. I was using official version of jQueryFileTree and assumed answer is for that version. Erwan's code was made for a fork by Servocoder: servocoder/jqueryfiletree

For the official version: jqueryfiletree/jqueryfiletree Code looks a bit different.

var folderToExpand = '/path/to/expand';
$('.filetree')
.on('filetreeinitiated', function(e, data) {
    if (folderToExpand !== null) {
        var $el = $(e.target),
        flag = false;
        $el.find(".directory.collapsed").each(function (i, folder) {
            var $link = $(folder).children();
            if (folderToExpand.indexOf($link.attr('rel')) === 0) {
                flag = true;
                data.options.expandSpeed = 0;
                setTimeout(function () {
                    $link.click();
                }, 50);
            }
        });
        if (flag === false) {
            folderToExpand = null;
            data.options.expandSpeed = 500;
        }
    }
});

jQuery FileTree 2.1.x - default open folder

2 Answers2