using sujith3g:jstree , displays files as folders in the tree

Question!

I am using sujith3g:jstree package for my project on document management system.I need all the uploaded files on the tree. I have my uploaded files saved inside a collection named Uploads. This is the code i am using: Template, home.html:

<template name="home">
{{#if currentUser}}
<div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <h3></h3>
            <div class="row">
                <div class="col-md-4 col-sm-8 col-xs-8">
                    <button type="button" class="btn btn-success btn-sm" onclick="demo_create();"><i class="glyphicon glyphicon-asterisk"></i> Create</button>
                    <button type="button" class="btn btn-warning btn-sm" onclick="demo_rename();"><i class="glyphicon glyphicon-pencil"></i> Rename</button>
                    <button type="button" class="btn btn-danger btn-sm" onclick="demo_delete();"><i class="glyphicon glyphicon-remove"></i> Delete</button>
                </div>
                <div class="col-md-2 col-sm-4 col-xs-4" style="text-align:right;">
                    <input type="text" value="" style="box-shadow:inset 0 0 4px #eee; width:120px; margin:0; padding:6px 12px; border-radius:4px; border:1px solid silver; font-size:1.1em;" id="demo_q" placeholder="Search" />
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div id="jstree_demo" class="demo" style="margin-top:1em; min-height:200px;"></div>
                    <script>
                    function demo_create() {
                        var ref = $('#jstree_demo').jstree(true),
                            sel = ref.get_selected();
                        if (!sel.length) {
                            return false;
                        }
                        sel = sel[0];
                        sel = ref.create_node(sel, {
                            "type": "file"
                        });
                        if (sel) {
                            ref.edit(sel);
                        }
                    };

                    function demo_rename() {
                        var ref = $('#jstree_demo').jstree(true),
                            sel = ref.get_selected();
                        if (!sel.length) {
                            return false;
                        }
                        sel = sel[0];
                        ref.edit(sel);
                    };

                    function demo_delete() {
                        var ref = $('#jstree_demo').jstree(true),
                            sel = ref.get_selected();
                        if (!sel.length) {
                            return false;
                        }
                        ref.delete_node(sel);
                    };
                    $(function() {
                        var to = false;
                        $('#demo_q').keyup(function() {
                            if (to) {
                                clearTimeout(to);
                            }
                            to = setTimeout(function() {
                                var v = $('#demo_q').val();
                                $('#jstree_demo').jstree(true).search(v);
                            }, 250);
                        });

                        $('#jstree_demo').jstree({
                                "core": {
                                    "animation": 0,
                                    "check_callback": true,
                                    "themes": {
                                        "stripes": true
                                    },
                                    "data" : [
                                        {
                                            "text" : "Home",                      
                                            "children" : Uploads.find().fetch(),
                                            "type" : "root"
                                        }]
                                    },
                                "types": {
                                    "#": {
                                        "max_children": 5,
                                        "max_depth": 10,
                                        "valid_children": ["root"]
                                    },
                                    "root": {
                                        "icon": "/static/3.1.1/assets/images/tree_icon.png",
                                        "valid_children": ["default"]
                                    },
                                    "default": {
                                        "valid_children": ["default", "file"]
                                    },
                                    "file": {
                                        "icon": "glyphicon glyphicon-file",
                                        "valid_children": [],
                                        "type": "file"
                                    }
                                },
                                "plugins": ["contextmenu", "dnd", "search", "state", "types", "wholerow"]
                            });

                    });
                    </script>
                </div>
            </div>
        </div>
    </div>

I now get the files in the uploads collection displayed as folders. I want them as filles itselfCan anyone help me out in solving this?

By : Aparna V


Answers

It depends on what Uploads.find().fetch() returns. If each element of the resulting array has a type property set to file it will work properly.

By : vakata


This video can help you solving your question :)
By: admin