Samples Forum Support
Documentation
StartGuides

Initialization

In this article you will learn how to initialize and configure dhtmlxVault. Follow these simple steps:

  1. Include the dhtmlxVault source files on a page.
  2. Create a container for dhtmlxVault.
  3. Initialize dhtmlxVault with the object constructor.
  4. Load a list of files into Vault

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>How to Start with dhtmlxVault</title>
        <script type="text/javascript" src="/codebase/vault.js"></script>
        <link rel="stylesheet" type="text/css" href="/codebase/vault.css">
    </head>
    <body>
        <div id="vault"></div>
        <script>
            // creating dhtmlxVault
            var vault = new dhx.Vault("vault",{
                uploader:{
                    target: "/upload"
                }
            });
        </script>
    </body>
</html>

Including source files

Download the package and unpack it into a folder of your project.

To create dhtmlxVault, you need to include 2 source files on your page:

  • vault.js
  • vault.css

Make sure that you set correct relative paths to these files:

index.html

<script type="text/javascript" src="codebase/vault.js"></script>  
<link rel="stylesheet" href="codebase/vault.css">

The structure of the Vault pack is the following:

  • sources - the source code files of the library; they are easy-to-read and are mostly intended for debugging;
  • codebase - the obfuscated code files of the library; they are much smaller and intended for use in production. Include these files in your apps when they are ready;
  • samples - the code samples.

Rendering fonts

dhtmlxVault makes use of Google Fonts for the elements content. That's why you need to include the related source file into your document as well:

<script type="text/javascript" src="codebase/vault.js"></script>    
 
<link rel="stylesheet" href="codebase/vault.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500"     rel="stylesheet">

Creating container

Add a container for the vault and give it an id, for example "vault":

index.html

<div id="vault"></div>

Initializing dhtmlxVault

Initialize dhtmlxVault with the dhx.Vault object constructor. The constructor has two parameters:

index.html

// creating dhtmlxVault
var vault = new dhx.Vault("vault",{// config options});

Path to the upload script

You need to set an URL to the server-side script that will process file upload before the Vault initialization. For this, specify the path as a string value of the target property in the Uploader configuration object:

index.html

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

Related sample:  Vault. Initialization

Configuration properties

This is the list of properties that you can specify in the Vault configuration object:

  • disablePreview - (boolean) defines whether the preview images for the newly added files should be hidden;
  • downloadURL - (string) the path to the directory of the uploaded file on a server;
  • editable - (boolean) defines whether inline editing is enabled in the vault;
  • mode - (string) defines the mode of rendering the list of files: "grid" or "list";
  • modeControls - (boolean) defines whether the mode controls are displayed in the toolbar of Vault
  • scaleFactor - (number) the multiplier factor of the quality of an HTML canvas image;
  • progressBar - (object) specifies the configuration of the progress bar;
  • toolbar - (boolean) defines whether the toolbar of dhtmlxVault is shown. true by default;
  • uploader - (object) specifies the configuration of the Uploader object.

You can set necessary configuration options during initialization as the second parameter of the constructor:

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

There are also configuration properties that are set via the Uploader configuration object:

  • autosend - (boolean) optional, enables automatic sending of the added file. true by default. If set to false, files will be sent after a user clicks the Upload button;
  • fieldName - (string) optional, sets the file field name in the form data that is sent to the server, "file" is the default value;
  • headerParams - (object) optional, provides additional parameters for Request Headers
  • params - (object) optional, adds extra parameters as key-value pairs for sending an XMLHttpRequest. This setting can be used to add parameters from Vault configuration. E.g. if a user sends images, the images can be collected into FormData and then configuration parameters can be added into FormData;
  • singleRequest - (boolean) optional, defines that files are sent to server in one request, otherwise files are sent one by one. The property is false by default;
  • target - (string) obligatory, an URL to the server-side script that will process file upload;
  • updateFromResponse - (boolean) optional, updates file attributes with data from server response.
// creating dhtmlxVault
var vault = new dhx.Vault("vault",{ 
    uploader:{
        target:"/upload"
        autosend:false 
    }
});

More details are given in the dhtmlxVault API reference.

Related sample:  Vault. Grid mode

Loading data

You can load the list of files added for upload, process files uploading on the server side and configure their downloding. Check the Loading List of Files and Uploading Files articles for details.

It is possible to load a list of files from an external file with the load method or use the parse method to load a list of files from a local source.

// load from an external file
vault.data.load("/files.json");
 
// load from a local source
vault.data.parse(files);

Files configuration

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 details
  • 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/".

Back to top