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 preview image for a file. 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(files);

Related sample:  Server data

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 the full path to the file or only 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);
Back to top