Filemanager + backbone

Webix JS
1

Hi,
I would like to use the FileManager on Top of a backbone data model. I want the Filemanager to automatically synchronize with the backbone data model. So if I add/delete an item in the backbone data model, it will automatically show/hide in filemanager.

How would I need to structure the data model and how would I attach/load it into Filemanager so it automatically synchronizes?

regards
Joachim

2

FileManager is constructed around TreeDataStore
As far as I can see, without extensions, Backbone can’t work with hierarchical collections. So it is not possible to link data in filemanager to BackBone collection.

3

Where would I find documentation of “TreeDataStore”? Searchresults on your documentation site give 0 hits.

If I cannot use a backbone model, can I use a javascript object?
I have set the data property to a sample object:

    var mydata =
[
           { id: '1', value: 'Folder 01', type: "folder", date: 1420717913, data: [{ id: '11', value: 'file1', type: 'text' }] },
           { id: '2', value: 'Folder 02', type: "folder", date: 1420717913 },
           { id: '3', value: 'Folder 03', type: "folder", date: 1420717913 }
];

But when I add a new item on root level after the control has rendered, the new item does not show up. Is there a way to automatically synchronize?

4

http://docs.webix.com/api__refs__treestore.html

$$("fm").data will be a TreeStore object, it contains all data of filemanager. So you can add or modify data in this structure and later user $$("fm").refresh() to apply changes.

5

Let me tell you what I want to achieve:
I want to use Filemanager as the client side of a Sharepoint application. Therefore I have a special treatment for uploading/deleting/querying the content. I need to intercept those actions and handle them in my own script.

What is the best approach here? I have read about the proxy classes, but I don´t seem to get them working. What I need is the ability to assign a function instead of a url to all handlers.

My proxy looks like this:

webix.proxy.spUpload = {
        $proxy: true,
        load: function (view, callback) {
            console.log("spUpload.loading");
        },
        save: function (view, callback) {
            console.log("spUpload.save");
        }
    }
6

And I call it:

    MyView = WebixView.extend({
        config: {
            view: "filemanager",
            data: mydata,
            id: "mylist",
            select: true,
            on: {
                "data->onStoreUpdated": function () {
                    alert('updated');
                }, "data->onBeforeDelete": function () {
                    alert('deleting?');
                }
            },
            handlers: {
                "upload": "spUpload"
            }
        }
    });

but it gets never called, instead I get a failed POST request in the browser:
POST http://localhost:58354/spUpload 404 (Not Found)

7

File uploading works differently from other handlers.

You can use code like next to intercept file uploading operations

$$("files").getUploader().attachEvent("onBeforeFileAdd", function(item){
   // item.file is the HTML5 file object
    return false;
})

Also in its current state FileManager is not very friendly to server-less data operations. Some places in code will try to access the server side without easy way to prevent|override operations. We will check how it can be improved in the next update.