Loading List of Files

DataCollection of dhtmlxVault stores the files that are added for upload. You can load and save the list of files.

Preparing data

dhtmlxVault accepts data in the JSON format. For example:

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

The file object has the following properties:

id - (string) the ID of the file
image - (string) an HTML Canvas image for preview in the grid
link - (string) the path to the uploaded file on a server. Read more below
name - (string) the name of the file including the extension (for adding files from a server)
size - (number) the size of the file in bytes (for adding files from a server)
status - (string) the status of the file ("queue", "inprogress", "uploaded", or "failed")
path - (string) the path to the file on the computer starting from the name of the folder (in case a folder with files is added)
preview - (string) the path to the file preview. Can be set for a file with status:"uploaded". If the parameter isn't specified, Vault will generate preview automatically
progress - (number) the progress of the file upload
request - (object) an XMLHttpRequest object sent to server when an upload begins

The path attribute is added only to files that were added in a folder. Thus, a file "dog.jpg" added in the folder "animals" will get the attribute path="animals/".

Loading from server

You can load a list of files from an external file with the load method. As a parameter the method takes the URL of an external file:

vault.data.load("/files.json");

dhtmlxVault will make an AJAX request and will wait for a valid JSON array. The request is asynchronous, so if you want to do something after the list of files is loaded, use the then method:

vault.data.load("/files").then(() => {
   // do something
});

The method will return a promise of data loading.

Loading from local source

Use the parse method to load a list of files from a local source. Pass an array of files that should be loaded as a parameter of the method:

var vault = new dhx.Vault("vault_container",{ target:"/upload" });
vault.data.parse(dataset);

Downloading files

In order to download files from Vault to the computer, file objects must have the link attribute specified with the path to their location on the server.

var files = [
    {
        "name":"file1.jpg",
        "link":"YOUR_LINK"
    },
    // more file objects
];

The link attribute may contain both a full path to the file, or only a partial path, or the file id. If the path is not full, you can use the downloadURL property. It sets the path to the directory of the uploaded file on a server. Then the link to the file on a server will be built as downloadURl+link attribute of the file object.

Saving and restoring the file list

You can get the list of files in the queue with the serialize method. It will return an array of JSON objects for each file in the list:

var state = vault.data.serialize();
/* =>
[
    {
        id:"u1531242355011",
        name:"dfgergrdJ0E.jpg",
        progress:0,
        size:132653,
        status:"queue",
        type:"image/jpeg"
    },
    {
        id:"u1531242355010",
        name:"_lp31XrdJ0E.jpg",
        progress:0,
        size:142633,
        status:"queue",
        type:"image/jpeg"
    }
]
*/

Later, you can restore the list with the parse method:

vault.data.parse(state);