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",
            name:"simplevault",
            label: "i am simpleVault",
            labelWidth: "120px",
            labelPosition: "left",
            disabled: false,
            required: false
        }
    ]
});

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
value	(array) sets the default list of loaded files. Each file object can contain the following properties: id - (string) mandatory, the id of the file status - (string) optional, the status of the file ("queue", "inprogress", "uploaded", or "failed") progress - (number) optional, the progress of the file upload link - (string) optional, the path to the uploaded file on a server. In order to download files from SimpleVault to the computer, file objects must have the link attribute specified with the path to their location on the server. request - (object) optional, an XMLHttpRequest object sent to server when an upload begins path - (string) optional, the path to the file on the computer starting from the name of the folder (in case a folder with files is added) name - (string) optional, the name of the file including the extension (for adding files from a server) size - (number) optional, the size of the file in bytes (for adding files from a server)
width	(string\|number\|"content") the width of a control
height	(string\|number\|"content") the height of a control
padding	(string\|number) sets padding between a cell and a border of the SimpleVault 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
hidden	(boolean) defines whether a control is hidden
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
fieldName	(string) optional, sets the name of the file field in the form data that is sent to the server. By default takes its value from the value of the name property, or, if not specified, from the id attribute.
params	(object) optional, adds extra parameters for sending an XMLHttpRequest
singleRequest	(boolean) defines whether files are sent in one request, false by default
target	(string) mandatory, sets an URL to the server-side script that will process file upload

Working with SimpleVault

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

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

var value = form.getItem("simpleVault").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
getProperties	returns an object with the available configuration attributes of the control
getValue	returns the current value of a SimpleVault control
hide	hides a SimpleVault control
isDisabled	checks whether a SimpleVault control is disabled
isVisible	checks whether a SimpleVault control is visible on the page
selectFile	opens the dialog for selecting a new file (files) for adding to a SimpleVault
send	sends a POST request for file upload to a server-side URL
setProperties	allows changing available configuration attributes of the control dynamically
setValue	sets the value for a SimpleVault control
show	shows a SimpleVault control on the page
validate	validates a SimpleVault control

List of the control events:

afterChangeProperties	fires after configuration attributes of the control have been changed dynamically
afterHide	fires after a control is hidden
afterShow	fires after a control is shown
afterValidate	fires after the control value is validated
beforeChangeProperties	fires before configuration attributes of the control are changed dynamically
beforeHide	fires before a control is hidden
beforeShow	fires before a control is shown
beforeUploadFile	fires before file upload begins
beforeValidate	fires before the control value is validated
change	fires on changing the value of a control
uploadBegin	fires when file upload begins
uploadComplete	fires when upload is completed
uploadFail	fires if the file upload failed
uploadFile	fires when a file has been uploaded
uploadProgress	fires on each percent of files uploading

Using DataCollection API

You can manipulate a SimpleVault control with the help of the DataCollection API.

For example, you can remove one or all files from the list. To do that, you need to apply the remove, or removeAll method of DataCollection to the object returned by the getItem() method as follows:

form.getItem("simpleVault").data.remove("file_id");
 
form.getItem("simpleVault").data.removeAll();

Check the full list of Data Collection API.

Uploading files

You can read about uploading files into a SimpleVault control in the related article.