Managing Files

In order to manage files in Vault, you should make use of the Events API and API of Data Collection. Read the details below.

Controlling file extensions

To limit the list of allowable extensions, you can use the BeforeAdd event. Check the type field of the file object:"BeforeAdd", function(item){
    return item.file.type === "txt";

Related sample:  Vault. Check files types and size

Controlling size of a file to upload

To set the maximum file size, use the BeforeAdd event. Check the size field of the file object:

var allowedSize = 12345; // your choice"BeforeAdd", function(item){
    return item.file.size <= allowedSize;

Related sample:  Vault. Check files types and size

Controlling total size of uploaded files

You can also set the maximum size of all files that can be uploaded to the server. Handle the BeforeAdd event in the following way:

var totalSize = 0;
var maxSize = 98765; // your choice"BeforeAdd", item => {
    var size = item.size || item.file.size;
    var other =, v) {
        return sum + v;
    }, 0);
    if (size + other > maxSize) {
        return false;

Related sample:  Vault. Total files size

Controlling number of uploaded files

To set the maximum number of files that can be uploaded to the server, you can use the BeforeAdd event as in:

var limit = 1;"BeforeAdd", function() {
    if ( >= limit) {
        return false;

Related sample:  Vault. Files limit

Iterating through files

To iterate through all files in the list, call the map method of DataCollection:{
    return fileItem.file;

Looking for a file

You can look for a file by some criterion. Use the find method with an object as a parameter with these properties:

  • by - the field of a file object
  • match - the value to match
var file ={ by:"status", match:"failed" });

To find a file by a more complex criterion, define a filtering function:

var file ={
    return file.status === "failed" && file.size > 20000; 

To find all matches, use a different method called findAll:

var files ={ by:"status", match:"failed" });

Getting file by ID

You can also look for a file by its ID with the help of the getItem method:

var file ="file_id");

If you do not know the ID of a file, you can look it up by the index of the file in the list using the getId method:

var id =;

Filtering the file list

You can show files in the list by some criteria with the filter method.

For simple filtering by one criterion, the method takes an object with two properties:

  • by - the field of a file object
  • match - the value of the field to match{ by:"status", match:"queue" });

You can also define a filtering function for filtering by several fields:{
    return file.status === "failed" && file.size > 20000;

It is also possible to define that each next filtering will be applied to the already filtered data, not to the initial data. Use the second parameter of the filter() method as in:{ by:"status", match:"queue" }, true);

Unfiltering the list of files

To revert Vault to the initial state, call the filter() method without parameters.; // show all files

Related sample:  Vault. Sorting

Sorting the file list

To sort the file list by some criterion, use the sort method. As a parameter, pass an object with two parameters:

  • rule - (function) a sorting function that contains the necessary rules for sorting
  • dir - (string) the direction of sorting ("asc" or "desc"){
    rule: function(a, b) {
        return a.size < b.size ? 1 : -1;

The rule function must have two parameters and return a number (-1 or 1).

Related sample:  Vault. Sorting

Rearranging files in the list

You can also move files in the list with the move method. The method takes the parameters listed below:

  • id - (string) the ID of a file
  • index - (number) the position to which the file will be placed in the list
  • target - (object) optional, the data (tree) collection where the file will be placed
  • targetId - (number) optional, the ID of the node (for a tree collection) where the file will be placed

For example, you can move a file to the end of the queue in the following way:"file_id",-1);

Removing files

To remove one or all files from the list, call the related methods of DataCollection: remove, which takes the id of a file as a parameter or removeAll, correspondingly :"file_id");;
Back to top