Configuration

You can use configuration settings of dhtmlxVault to adapt the component to your needs. Check the list of possible config properties.

Path for file upload

The path for file upload is set in the uploader configuration object with the target property. It is an obligatory property for Vault initialization:

var vault = new dhx.Vault("vault",{
    uploader:{
        target:"/upload"
    }
});

Related sample:  Initialization

Download URL

It is possible to specify the full path for file download via the downloadURL property of the Vault configuration object.

var vault = new dhx.Vault("vault", {                
    uploader: {
        target: "/backend/safeUpload",
        downloadURL: "/backend/upload/files/"
    }
});

The property is used to make the full path to a file on a server, in case the link attribute of the file object doesn't contain the full path. Then the link to the file on a server is built as downloadURl+link attribute of the file object.

Related sample:  Upload and rename

Grid mode

Added files are displayed in a list by default. dhtmlxVault has another mode that displays files in a grid, which is especially useful for uploading images.

In the grid mode images previews are displayed in Vault. You can view the file size by moving the mouse pointer over the file preview.

dhtmlxVault in the grid mode

To enter the grid mode, set the mode of dhtmlxVault to the "grid" value:

var vault = new dhx.Vault("vault",{
    uploader:{
        target:"/photos"
    }
    mode:"grid"
});

By default, the value of the mode property is "list".

Related sample:  Grid mode

File preview

A preview for a file is generated as an HTML canvas image. You can manage the quality of the preview image via the scaleFactor config option.

var vault = new dhx.Vault("vault_container", { 
    scaleFactor: 2
});

scaleFactor:1 means that a canvas-based image has the width and height equal to 98x98 px. By default the scaleFactor is set to 4, so the size of the canvas image is 98x4=392 => 392x392 px.

You can also specify your own preview image for a file with the "uploaded" status in the preview attribute of the file object.

Hiding toolbar

By default, dhtmlxVault has a toolbar. You can hide it by disabling the toolbar property of the dhtmlxVault configuration:

var vault = new dhx.Vault("vault_container", { 
    toolbar:false
});

Vault without a toolbar

Note that if there is no toolbar, added files will be uploaded automatically.

Related sample:  Without toolbar

Manual file upload

By default, files are uploaded to server automatically, as soon as you add them into Vault. If needed, you can disable automatic upload via the autosend property of the Uploader config object. In this case, users will add files into Vault first and then upload them by clicking the Upload button that will appear in the toolbar.

var vault = new dhx.Vault("vault",{
    uploader:{
        target:"/upload",
        autosend:false
    }    
});

Related sample:  Disable autosend

Sending all files in one request

By default, if a user adds several files for upload, they are sent to server one by one. If you want to send all files at once, you can enable sending them in one request as an array. Use the singleRequest property of the Uploader config object for this:

var vault = new dhx.Vault('vault',{
    uploader:{
        target:"/upload",
        singleRequest:true
    }
});

Related sample:  Single request

Extra params for XHRequest

You can include additional parameters from the configuration into a request with the params property. For instance, if a user sends several images, files can be collected into FormData and then configuration parameters can be added into FormData.

var vault = new dhx.Vault('vault',{
    uploader:{
        target:"/upload",
        params:{
            param1:value1,
            param2:value2
        }
    }
});

Custom JS scroll bar

By default, dhtmlxVault uses a scroll compatible with Webkit browsers only. If needed, you can apply a custom JS scroll that doesn't depend on the used browser. It will look as in:

Custom scroll bar

To enable the custom JS scroll, set the customScroll of dhtmlxVault configuration to true:

var vault = new dhx.Vault("vault_container", { 
    customScroll:true
});

Related sample:  Custom js scroll

Progress bar

It is possible to adjust the look and feel of the progress bar by setting a template function describing the desired logic of progress rendering inside of the progressBar configuration object. The template function takes two parameters:

  • percent - (number) the current percent of files uploading, a number from 0 to 100
  • extra - (object) an object with additional properties. It can have two optional properties:
    • current - (number) the size of currently uploaded files in bytes
    • total - (number) the total size of all files in the list in bytes
var vault = new dhx.Vault("vault", {
    uploader:{
        // obligatory, the path for upload
        target:"/upload"
    },
    progressBar: {
        template: function(percent, extra) {
            return getBasis(extra.current) + "/" + getBasis(extra.total);
        }
    }
});

Custom progress bar

Related sample:  Custom progress bar

Changing name of form field

If Vault is used together with a form, the name of the file field in the form data sent to server is "file". To change the default name, set the fieldName property:

var vault = new dhx.Vault('vault',{
    uploader:{
        target:"/upload",
        fieldName:"userpic"
    }
});

Updating file attributes from server response

Each file loaded into the Vault presents a JSON object with file attributes:

var files = [
    {
        "name":"one.jpg",
        "size":36484,
    },
    {
        "name":"another.svg",
        "size":35523213
    }
];

The full list of a file object properties is given in the article Loading List of Files.

By default the values of file attributes are updated from server response. You can disable this option in the updateFromResponse property of the Uploader object:

var vault = new dhx.Vault("vault_container", { 
    uploader:{
        // obligatory, the path for upload
        target:"/upload"
        updateFromResponse:false
    }
});
Back to top