{"id":7726,"date":"2020-10-07T13:40:56","date_gmt":"2020-10-07T10:40:56","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=7726"},"modified":"2025-07-30T11:52:50","modified_gmt":"2025-07-30T08:52:50","slug":"dhtmlx-vault-4-0-touch-screens-typescript","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/dhtmlx-vault-4-0-touch-screens-typescript\/","title":{"rendered":"DHTMLX Vault 4.0: Enhanced Work on Touch Screens, Fast Switching Between Display Modes, and TypeScript Support"},"content":{"rendered":"

The new major release 4.0 of DHTMLX Vault delivers TypeScript support and enhanced work on touch screens. From now on, the DHTMLX file upload component provides file drag-n-drop, ability to select and remove several files at a time, toggle between the Grid and List modes, and pass custom parameters in the request header. Besides, there appear new events for listening to various user actions.<\/p>\n

Download DHTMLX Vault 4.0 30-day free trial version ><\/a><\/strong> <\/p>\n

TypeScript Support<\/h5>\n

First and foremost, the DHTMLX file upload component receives support for TypeScript. From now on, coding will become faster and easier due to embedded type definitions, autocompletion, and type checking. Check the sample ><\/a><\/p>\n

Manipulating Multiple Files<\/h5>\n

Starting with v4.0, end-users can manipulate multiple files in the queue of our file uploader at the same time.
\nDHTMLX Vault allows selecting several files and deleting them just in one click.
\n\"JS<\/p>\n

Check the sample ><\/p>\n

<\/a><\/p>\n

File Drag-n-Drop<\/h5>\n

DHTMLX Vault makes it possible to reorder files in the queue using drag-n-drop. This feature is available by default in both Grid and List modes. Thus, you can select one or multiple files and move them all together.<\/p>\n

\"JS<\/p>\n

Check the sample ><\/p>\n

<\/a><\/p>\n

Switching Between Grid and List Modes<\/h5>\n

Another novelty is the ability to toggle between the Grid and List modes while manipulating files. Both Grid and List controls are available in the toolbar by default now. <\/p>\n

\"JS<\/p>\n

Check the sample ><\/p>\n

<\/a><\/p>\n

You can still hide the mode controls via the modeControls<\/strong><\/a> config. If this config is set to false<\/strong>, the controls won’t be displayed and files will be arranged in a list.<\/p>\n

var<\/span> vault =<\/span> new<\/span> dhx.Vault<\/span>(<\/span>"vault_container"<\/span>,<\/span> {<\/span>
\n    uploader:<\/span> {<\/span>
\n        \/\/ obligatory, the path for upload<\/span>
\n        target:<\/span>"\/upload"<\/span>
\n    }<\/span>,<\/span>
\n    modeControls:<\/span> false<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

The interface of DHTMLX Vault with these controls hidden looks like that:
\n\"Hidden<\/p>\n

Parameters of Request Headers<\/h5>\n

The release brings out the ability to include any custom parameters into the request header via the headerParams<\/strong><\/a> property of the Uploader configuration object. Thanks to that, developers can pass authentication tokens and any other parameters required.<\/p>\n

var<\/span> vault =<\/span> new<\/span> dhx.Vault<\/span>(<\/span>\u201cvault\u201d,<\/span> {<\/span>
\nuploader:<\/span> {<\/span>
\n    \/\/ obligatory, the path for upload<\/span>
\n    target:<\/span> "\/upload"<\/span>,<\/span>
\n    headerParams:<\/span> {<\/span>
\n        "firstCustomParam"<\/span>:<\/span> "customValue"<\/span>,<\/span>
\n        "secondCustomParam"<\/span>:<\/span> "customValue"<\/span>,<\/span>
\n        "thirdCustomParam"<\/span>:<\/span> "customValue"<\/span>
\n    }<\/span>
\n }<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n
Related Materials:<\/h5>\n
New Events<\/h5>\n

V4.0 enriched the API of DHTMLX Vault with a wide range of new events to make your app more interactive. Now our file uploader can listen to such user actions as dragging and dropping files, clicking and mouse hovering, and much more. Learn more ><\/a><\/p>\n

Here is a free 30-day evaluation version of DHTMLX Vault<\/a>. Download it and test the DHTMLX file uploader in your projects. We are looking forward to your feedback!<\/p>\n

We invite our current clients to get the latest major version in their Client’s Area<\/a>. <\/p>\n

Our technical support team is always there to help if you face any difficulties in your work with DHTMLX components. We answer all your tickets on business days within 24 to 72 hours.<\/p>\n

The List mode with hidden mode controls. Check the sample ><\/a><\/p>\n