SimpleVault

A handy control for quick and easy uploading of a file or a set of files.

SimpleVault control

Adding SimpleVault

You can easily add a SimpleVault control during initialization of a form:

var form = new dhx.Form("form_container", {
    rows: [
        {
            type: "simpleVault",
            label: "files",
            labelInline: true,
            labelWidth: "50px",
            width:"450px"
        }
    ]
});

Attributes

You can provide the following attributes in the configuration object of a SimpleVault:

type - (string) the type of a control, set it to "simpleVault"
name - (string) the name of a control
id - (string) the id of a control, auto-generated if not set
width - (string) the width of a control
height - (string) the height of a control
css - (string) adds style classes to a control
disabled - (boolean) defines whether a control is enabled (false) or disabled (true)
required - (boolean) defines whether a control is required
label - (string) specifies a label for a control
labelWidth - (string|number) sets the width of the label of a control
hiddenLabel - (boolean) invisible label that will be used to identify the input on the server side
labelPosition - (string) defines the position of a label: "left"|"top"
helpMessage - (string) adds a help message to a control
preMessage - (string) a message that contains instructions for interacting with the control
successMessage - (string) a message that appears in case of successful validation of the control value
errorMessage - (string) a message that appears in case of error during validation of the control value
gravity - (boolean) arranges form controls evenly throughout the container, depending on the direction of layout ("cols" or "rows"), true by default
autosend - (boolean) enables/disables automatic sending of an added file
fieldName - (string) sets the file field name in the form data that is sent to the server
params - (object) adds extra parameters for sending an XMLHttpRequest
singleRequest - (boolean) defines whether files are sent in one request
target - (string) sets an URL to the server-side script that will process file upload
updateFromResponse - (boolean) updates file attributes with data from server response

Working with SimpleVault

You can manipulate a SimpleVault control by using methods of the object returned by the getItem() method.

For example, you can get the value of the control:

var value = form.getItem("simpleVault_id").getValue();

List of the control methods:

clear() - clears a value of a SimpleVault control
clearValidate() - clears validation of a SimpleVault control
disable() - disables a SimpleVault control on a page
enable() - enables a disabled SimpleVault control
getValue(): any[] - gets the current value of a SimpleVault control
getWidget(): object - returns the dhtmlxVault widget attached to a SimpleVault control
isDisabled(): boolean - checks whether a SimpleVault control is disabled
validate(): boolean - validates a SimpleVault control. Returns the result of validation: true, if a control is valid, otherwise - false

Working with the widget of SimpleVault control

There is a possibility to use methods of dhtmlxCalendar via the getWidget() method of a SimpleVault control.

For example, you can repaint Vault in the control. To do this, you need to get the widget attached to the SimpleVault control and then use the paint() method of dhtmlxVault widget.

var simpleVault = form.getItem("simpleVault_id").getWidget();  // -> Vault
simpleVault.paint(); // repaints Vault