Progress Bar for Uploader

Progress bar is set with CSS means for each file separately and is displayed in the dedicated component (e.g. list) set to a custom type.

Related sample:  Progress bar

Webix.type defines the way component items look like. Here you specify the component you make the type for, name of this type and item property(-ies) you set.

webix.type(webix.ui.list, {
    template: function(f, type){},
    height: 35


As a rule, displayed info contains the following data wrapped in the chosen CSS class (defined in the document head section).

  • - name and extension of the file;
  • cancel icon (built-in icon set via CSS class webix_remove_upload icon-cancel-circle webix_icon). More about Iconization here;
  • f.status - "transfer" or "server" with f.percent value for the latter;
  • f.sizetext - size of the file.
    var html = "<div class='overall'><div class='name'>""</div>";
    html += "<div class='remove_file'><span style='color:#AAA'"+
    "class='webix_remove_upload icon-cancel-circle webix_icon'></span></div>";
    html += "<div class='status'>";
    html += "<div class='progress "+f.status+"'"+
"style='width:"+(f.status == 'transfer'||f.status=="server"?f.percent+"%": "0px")+"'>"+
    html += "<div class='message "+ f.status+"'>"+type.status(f)+"</div>";
    html +=  "</div>";
    html += "<div class='size'>"+ f.sizetext+"</div></div>";
    return html;


Here you put a function that defines status message displayed in the progress bar.

    var messages = {
        server: "Done",
        error: "Error",
        client: "Ready",
        transfer:  f.percent+"%"
    return messages[f.status]

Functionality for the "cancel" icon.

on_click:{ "remove_file":function(ev, id){

Minor parameters

The ones like width and height of each list item.

Beware to set the created type for the list!

{view:"list",  id:"mylist", type:"myUploader", ...}
Back to top