A handy control for quick and easy uploading of a file or a set of files.
Related sample: Form. All DhxForm Inputs
Related sample: Form. Simple Vault
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
}
]
});
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:
|
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 |
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();
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 |
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 |
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.
You can read about uploading files into a SimpleVault control in the related article.
Back to top