link

sets the component to display values of the files chosen for upload

Example

webix.ui({
    view:"form", 
    rows:[
        {  
            view:"uploader", 
            value:"Upload file",
            link:"mylist", //ID of the linked list 
            upload:"php/upload.php"
        }, 
        {
            view:"list",  
            id:"mylist", 
            type:"uploader" //defines config of each list item
        }
    ]
});

Related samples

The component should have appropriate configuration to display file properties. In case of list, just define a built-in "uploader" type for it, which includes the needed template, upload state vizualization, remove icon and click behavior.

You can as well create a custom type by extending any component that can display data with necessary properties:

A custom type includes:

• template (string) - set elements to display - file properties: (name, id, size, sizetext, type, status); - icons;
• percent (function) - function to display different icons for different upload statuses;
• removeIcon (function) - fucntion that sets a removeIcon as CSS class;
• on_click - click behavior of the list item;
• status (object ) - object with properties to define messages for upload statuses:

webix.type(webix.ui.list, {
    name:"custom_name",
    template:"#name#  {common.removeIcon()}{common.percent()}\
                \<div style='float:right'>#sizetext#</div>",
    percent:function(obj){...},
    removeIcon:function(obj){...},
    on_click:{...}
    status:function(f){
        var messages = {
            server: "Done",
            error: "Error",
            client: "Ready",
            transfer:  f.percent+"%"
        };
        return messages[f.status]
 
    }
});

webix.ui({
    view:"list",
    type:"custom_name"
    ...
});

Related sample:  Progress Bar

More about type implementation.

Back to top