Customizing Vault

Toolbar controls

By default the toolbar of dhtmlxVault has three icon buttons:

  • the Add icon button for adding files into Vault (id:"add")
  • the Upload icon button for upload files to the server (id:"upload") (if the automatic upload is disabled by the autosend:false property)
  • the Clear all icon button for clearing the list of files for upload (id: "remove-all")

To add new controls to the toolbar and delete unnecessary ones, you should make use of the toolbar data collection API. It will be described in detail in the next sections of this chapter.

Using icons

dhtmlxVault uses the Material Design Icons for toolbar controls by default. You can also use a different icon font. To apply a different icon font, e.g. Font Awesome, include it on the page with dhtmlxVault and use desired icons in the toolbar.

Font Awesome can be used from CDN. It should be included after vault.js and vault.css files like this:

<script type="text/javascript" src="../../codebase/vault.js"></script>
<link rel="stylesheet" type="text/css" href="../../codebase/vault.css">
<link rel="stylesheet" 
href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" 
integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" 
crossorigin="anonymous">

Then you can apply any Font Awesome icon for toolbar icon buttons. Use the name of the icon as the value of the icon property in the object with the control parameters. See details below.

Adding controls

To add a control into the toolbar, apply the vault.toolbar.data.add() method. It takes as parameters an object with the control config and the index of the position to place the icon button into:

vault.toolbar.data.add({
    type: "iconButton",
    id: "buttonId",
    tooltip: "Some tooltip",
    icon: "icon name"
}, 2);

The object of an icon button has the following properties:

  • type - the type of a button, set it to the "iconButton" value
  • id - the id of an icon button
  • tooltip - the tooltip of an icon button
  • css - the CSS style to apply to an icon button
  • icon - the name of an icon from the used icon font
  • twoState - the flag that defines whether an icon button can be used in two states
  • active - specifies the state of an icon button: true - active, false - inactive

For example:

vault.toolbar.data.add({
    type: "iconButton",
    id: "calc-size",
    tooltip: "calculate total size",
    icon: "fas fa-calculator" 
}, 2);

Custom button in the toolbar

Related sample:  Custom button

Updating controls

You can change the icon of the Toolbar control and its other config options with the help of the vault.toolbar.data.update() method. It takes two parameters:

  • the id of an icon button
  • an object with new configuration of the control
vault.toolbar.data.update("add", {
    icon: "icon_name" 
});

In the example below the default icons of the toolbar icon buttons are changed to Font Awesome ones:

vault.toolbar.data.update("add", {icon: "far fa-plus-square"});
vault.toolbar.data.update("remove-all", {icon: "far fa-trash-alt"});
vault.toolbar.data.update("upload", {icon: "far fa-save"});

Custom icons in the toolbar

Related sample:  Custom icons for toolbar

Deleting controls

To remove a control from the toolbar, make use of the vault.toolbar.data.remove() method. Pass the id of the control that should be removed to the method:

vault.toolbar.data.remove("switch");

Icons for files extensions

Vault provides icons for various types of files. Similar files extensions are combined into groups, for example: the "icon_image" group contains jpg,gif,png,etc. extensions and for all types in the group Vault uses the same icon. For all extensions that do not suit any of the groups the default icon is used.

Default icons

Group Icon Extensions
icon_image jpg, jpeg, gif, png, bmp, tiff, pcx, svg, ico
icon_psd psd
icon_video avi, mpg, mpeg, rm, move, mov, mkv, flv, f4v, mp4, 3gp, wmv, webm, vob
icon_audio wav, aiff, au, mp3, aac, wma, ogg, flac, ape, wv, m4a, mid, midi
icon_arch rar, zip, tar, tgz, arj, gzip, bzip2, 7z, ace, apk, deb, zipx, cab, tar-gz, rpm, xar
icon_text txt, nfo, djvu, xml, tex
icon_html html, htm, eml
icon_doc doc, docx, docm, dot, dotx, odt, wpd, wps, pages, rtf
icon_pdf pdf, ps, eps
icon_xls xlr, xls, xlsm, xlsx, ods, csv, tsv
icon_exe exe
icon_dmg dmg
icon_ppt pot, potm, potx, pps, ppsm, ppsx, ppt, pptx, pptm, odp
other for all other formats the default icon is used

Custom icons for file extensions

To specify custom icons for file extensions, you need to change the related styles. A style for a particular group of extensions has a name formed as .extension-[name], like .extension-js. To change the default icon of a group, set the path to a custom icon as a background of the corresponding style:

<style>
    .extension-js {
        background: url(../JS-custom.svg) no-repeat center center!important;
    }
    .extension-doc {
        background: url(../DOC-custom.svg) no-repeat center center!important;
    }
</style>

Custom Icons

Related sample:  Custom icons

Status bar

You can add a status bar for Vault to show some information about the files in the queue. A status bar can be placed in any place on a page and contain any data related to files.

For example, here is an example of a status bar that shows the number of files and their size:

Status bar

To reproduce the same implementation, follow the step-by-step instruction below:

  • specify the structure of the status bar

The container of the status bar has the "info-line" class. Add two more divs for the number of files and the size of files. In their turn, they will have two more divs each: for value and text. You can also wrap the div with status bar into another container to present it in a separate block:

<div class="top-rect-block">
    <div class="info-line">
        <div class="files-count">
            <div id="files-count-value" class="number-value">0</div>
            <div class="text-value">Files /&nbsp</div>
        </div>
        <div class="files-size">
            <div id="files-size-value" class="number-value">0</div>
            <div id="files-size-text" class="text-value">b</div>
        </div>
   </div>
</div>
  • define a container for Vault and initialize it
<div id="vault" class="container with-header"></div>
 
var vault = new dhx.Vault("vault", {
    uploader: {
       target: "/backend/upload"
    }
});
  • use the Change event to describe that on each change in the list of files Vault should iterate through its data collection and calculate the number of files, their total size and change the text for size units accordingly:
vault.events.on("change", function() {
    var count = vault.data.getLength();
 
    var size = vault.data.reduce(function(sum, item) {
        return sum + item.size;
    }, 0);
    filesCountValue.textContent = count;
 
    var basis = getBasis(size, 0, true);
 
    filesSizeValue.textContent = basis.size;
    filesSizeText.textContent = basis.metric;
});
  • provide variables that will write the resulting values into the corresponding divs of the status bar:
var filesCountValue = document.getElementById("files-count-value");
var filesSizeValue = document.getElementById("files-size-value");
var filesSizeText = document.getElementById("files-size-text");

Related sample:  Info line

Back to top