{"id":5408,"date":"2018-09-19T12:06:38","date_gmt":"2018-09-19T09:06:38","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=5408"},"modified":"2026-09-24T18:23:16","modified_gmt":"2026-09-24T15:23:16","slug":"dhtmlxvault-3-0-meet-completely-renewed-javascript-file-uploader-manager","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/dhtmlxvault-3-0-meet-completely-renewed-javascript-file-uploader-manager\/","title":{"rendered":"dhtmlxVault 3.0: Meet Our Completely Renewed JavaScript File Uploader and Manager"},"content":{"rendered":"<p>dhtmlxVault 3.0 is a completely renewed version of our <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxVault\/\" rel=\"noopener\" target=\"_blank\">JavaScript file upload and manager component<\/a>. V 3.0 provides a very simple way to build file uploaders due to the new comprehensive API. The new version gives an advantage of changing the look and feel of Vault to answer the needs of end users thanks to a new configurable layout and flexible customization options. In addition, we&#8217;ve introduced support for three popular frameworks &#8211; <a href=\"https:\/\/docs.dhtmlx.com\/vault\/angular_integration.html\" rel=\"noopener\" target=\"_blank\">Angular<\/a>, <a href=\"https:\/\/docs.dhtmlx.com\/vault\/react_integration.html\" rel=\"noopener\" target=\"_blank\">React<\/a>, and <a href=\"https:\/\/docs.dhtmlx.com\/vault\/vuejs_integration.html\" rel=\"noopener\" target=\"_blank\">Vue.js<\/a>.<\/p>\n<p><strong><a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxVault\/download.shtml\" rel=\"noopener\" target=\"_blank\">Download dhtmlxVault 3.0 for 30-day evaluation ><\/a><\/strong><\/p>\n<p><iframe loading=\"lazy\" width=\"800\" height=\"450\" style=\"margin: 0 auto;\" src=\"https:\/\/www.youtube.com\/embed\/zCR72TZfDug\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" allowfullscreen><\/iframe><\/p>\n<h5>UI Update<\/h5>\n<p>The interaction with dhtmlxVault is highly intuitive. Vault supports drag and drop, has a set of controls for managing files and a clear UI based on Material design. The progress bar shows how the upload process goes illustrating it with the percentage of the upload.<\/p>\n<p>Displaying files in Vault is available in two modes: list mode (by default) and grid mode. The advantage of the grid mode is showing image previews of files and manipulating the quality of the image preview. <a href=\"https:\/\/docs.dhtmlx.com\/vault\/configuring.html#gridmode\" rel=\"noopener\" target=\"_blank\">Read more in docs ><\/a>   <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2018\/09\/upload_progress2.png\" alt=\"List Mode\" width=\"444\" height=\"355\"  display=\"block\" class=\"alignleft size-full wp-image-5438\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2018\/09\/upload_progress2.png 444w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2018\/09\/upload_progress2-300x240.png 300w\" sizes=\"auto, (max-width: 444px) 100vw, 444px\" \/><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2018\/09\/vault_grid_progress-1.png\" alt=\"Vault Grid Mode\" width=\"444\" height=\"355\" display=\"block\" class=\"alignright size-full wp-image-5412\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2018\/09\/vault_grid_progress-1.png 444w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2018\/09\/vault_grid_progress-1-300x240.png 300w\" sizes=\"auto, (max-width: 444px) 100vw, 444px\" \/><\/p>\n<p style=\"text-align:center; margin-top:0; font-size:15px\">List vs Grid Mode<\/p>\n<h5>Totally Renewed API<\/h5>\n<p>Along with uploading files, Vault is able to restore the list of previously uploaded files from the server. Downloading files from Vault to the computer is also possible if there&#8217;s a <strong>link<\/strong> attribute with the path to the files&#8217; location on the server. Besides, end users can cancel file uploading at any moment.<\/p>\n<p>The upload of files can start automatically when the upload button is hidden or <a href=\"https:\/\/docs.dhtmlx.com\/vault\/configuring.html#manualfileupload\" rel=\"noopener\" target=\"_blank\">manually<\/a> by end users pressing the upload button:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2018\/09\/upload_button.png\" alt=\"Upload button\" width=\"443\" height=\"291\" class=\"alignleft size-full wp-image-5426\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2018\/09\/upload_button.png 443w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2018\/09\/upload_button-300x197.png 300w\" sizes=\"auto, (max-width: 443px) 100vw, 443px\" \/><\/p>\n<p>However, dhtmlxVault goes beyond these features and offers a range of options for conveniently managing files with the help of the Events API and API of Datacollection. <\/p>\n<p>For example, for controlling the upload process, you can put restrictions on the maximum size of each uploaded file or all files for upload, the number of uploaded files or allowable file extensions.<\/p>\n<div class=\"codecolorer-container javascript default codecolorer-noborder\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">var<\/span> allowedSize <span class=\"sy0\">=<\/span> <span class=\"nu0\">12345<\/span><span class=\"sy0\">;<\/span> <span class=\"co1\">\/\/ your choice<\/span><br \/>\nvault.<span class=\"me1\">events<\/span>.<span class=\"me1\">on<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;BeforeAdd&quot;<\/span><span class=\"sy0\">,<\/span> <span class=\"kw1\">function<\/span><span class=\"br0\">&#40;<\/span>item<span class=\"br0\">&#41;<\/span><span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">return<\/span> item.<span class=\"me1\">file<\/span>.<span class=\"me1\">size<\/span> <span class=\"sy0\">&lt;=<\/span> allowedSize<span class=\"sy0\">;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p><a href=\"https:\/\/snippet.dhtmlx.com\/ssiegemu?tag=vault\" rel=\"noopener\" target=\"_blank\">Check sample ><\/a><\/p>\n<p>Additionally, dhtmlxVault allows <a href=\"https:\/\/docs.dhtmlx.com\/vault\/samples\/91_advanced_usage\/06_filtering.html\" rel=\"noopener\" target=\"_blank\">filtering<\/a> and <a href=\"https:\/\/snippet.dhtmlx.com\/2jkye4qx?tag=vault\" rel=\"noopener\" target=\"_blank\">sorting<\/a> the queue of files by different criteria like file name, size or extension.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2018\/09\/sorting.gif\" alt=\"Sorting\" width=\"700\" class=\"alignleft size-full wp-image-5515\" \/><\/p>\n<div class=\"codecolorer-container javascript default codecolorer-noborder\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">vault.<span class=\"me1\">data<\/span>.<span class=\"me1\">sort<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; rule<span class=\"sy0\">:<\/span> <span class=\"kw1\">function<\/span><span class=\"br0\">&#40;<\/span>a<span class=\"sy0\">,<\/span> b<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">return<\/span> a.<span class=\"me1\">size<\/span> <span class=\"sy0\">&lt;<\/span> b.<span class=\"me1\">size<\/span> <span class=\"sy0\">?<\/span> <span class=\"nu0\">1<\/span> <span class=\"sy0\">:<\/span> <span class=\"sy0\">-<\/span><span class=\"nu0\">1<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>Other options include iterating through files, looking for a file by some criterion, rearranging files in the queue and removing one or all files from there. <a href=\"https:\/\/docs.dhtmlx.com\/vault\/managing_files.html\" rel=\"noopener\" target=\"_blank\">Read more in docs ><\/a><\/p>\n<h5>Customization<\/h5>\n<p>A great advantage of dhtmlxVault 3.0 is its full customization according to the needs of end users. All Vault elements including toolbar controls and files&#8217; icons are easily customized.<\/p>\n<p>For example, you can add your own custom icon for any toolbar control: <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2018\/09\/custom-icon-for-toolbar-1.gif\" alt=\"Custom icon for toolbar\" width=\"700\" class=\"alignleft size-full wp-image-5519\" \/><\/p>\n<p><a href=\"https:\/\/docs.dhtmlx.com\/vault\/samples\/91_advanced_usage\/03_custom_icons_for_buttons.html\" rel=\"noopener\" target=\"_blank\">Check sample ><\/a><\/p>\n<p>You can also enlarge the list of default icons for various file extensions with custom ones:<\/p>\n<div class=\"codecolorer-container css default codecolorer-noborder\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"css codecolorer\">&lt;style<span class=\"sy0\">&gt;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"re1\">.extension-js<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">background<\/span><span class=\"sy0\">:<\/span> <span class=\"kw3\">url<\/span><span class=\"br0\">&#40;<\/span><span class=\"co2\">..\/JS-custom.svg<\/span><span class=\"br0\">&#41;<\/span> <span class=\"kw2\">no-repeat<\/span> <span class=\"kw2\">center<\/span> <span class=\"kw2\">center<\/span>!important<span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"re1\">.extension-doc<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">background<\/span><span class=\"sy0\">:<\/span> <span class=\"kw3\">url<\/span><span class=\"br0\">&#40;<\/span><span class=\"co2\">..\/DOC-custom.svg<\/span><span class=\"br0\">&#41;<\/span> <span class=\"kw2\">no-repeat<\/span> <span class=\"kw2\">center<\/span> <span class=\"kw2\">center<\/span>!important<span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n&lt;\/style<span class=\"sy0\">&gt;<\/span><\/div><\/div>\n<p>On top of that, you can adjust the progress bar and redefine the logic of progress rendering, so that it will display custom parameters like the file size or time remaining for the upload.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2018\/09\/custom_progress_bar-1.png\" alt=\"custom progress bar\" width=\"443\" height=\"353\" loop=\"loop\" autoplay=\"autoplay\" class=\"alignleft size-full wp-image-5450\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2018\/09\/custom_progress_bar-1.png 443w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2018\/09\/custom_progress_bar-1-300x239.png 300w\" sizes=\"auto, (max-width: 443px) 100vw, 443px\" \/><br \/>\n<a href=\"https:\/\/snippet.dhtmlx.com\/nn15366d?tag=vault\" rel=\"noopener\" target=\"_blank\">Check sample ><\/a><\/p>\n<p>And also add an info line to Vault that will show some characteristics of files in the queue such as their size or number. <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2018\/09\/status_bar.png\" alt=\"Info line\" width=\"511\" height=\"397\" class=\"alignleft size-full wp-image-5452\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2018\/09\/status_bar.png 511w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2018\/09\/status_bar-300x233.png 300w\" sizes=\"auto, (max-width: 511px) 100vw, 511px\" \/><br \/>\n<a href=\"https:\/\/snippet.dhtmlx.com\/oa5uzr32?tag=vault\" rel=\"noopener\" target=\"_blank\">Check sample ><\/a><\/p>\n<p>Another option, which will help you with tailor-making your file uploader to your project\u2019s needs, is to add an extra drop area for uploading files:<\/p>\n<div class=\"codecolorer-container css default codecolorer-noborder\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"css codecolorer\">&lt;div id<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;drophere&quot;<\/span><span class=\"sy0\">&gt;<\/span>DROP HERE&lt;\/div<span class=\"sy0\">&gt;<\/span><br \/>\n<br \/>\nvault<span class=\"re1\">.uploader<\/span>.linkDropArea<span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;drophere&quot;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p><img decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2018\/09\/drop-area.gif\" alt=\"Drop Area\" width=\"700\" class=\"alignleft size-full wp-image-5516\" \/><\/p>\n<p><a href=\"https:\/\/docs.dhtmlx.com\/vault\/samples\/91_advanced_usage\/05_droparea.html\" rel=\"noopener\" target=\"_blank\">Check sample ><\/a><\/p>\n<p>And that&#8217;s not a complete list of customization and configuration options available for changing the look and feel of your file uploader. <a href=\"https:\/\/docs.dhtmlx.com\/vault\/configuring.html\" rel=\"noopener\" target=\"_blank\">In our docs<\/a>, you&#8217;ll learn how to apply the necessary localization, add a custom scroll, hide the toolbar and much more.<\/p>\n<p>dhtmlxVault 3.0 also brings out new server-side options for integrating with PHP, Node, Go, Java and .NET. <\/p>\n<p>So, it&#8217;s high time to <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxVault\/download.shtml\" rel=\"noopener\" target=\"_blank\">download dhtmlxVault 3.0 free trial<\/a> and enjoy the new Vault! <\/p>\n<p>If you have an active support subscription for dhtmlxVault, await the newsletter with the download link or visit your <a href=\"https:\/\/dhtmlx.com\/clients\/\" rel=\"noopener\" target=\"_blank\">Client Area<\/a>.<\/p>\n<p>Looking forward to your feedback!<\/p>\n<h5>Related Material:<\/h5>\n<ul>\n<li><a href=\"https:\/\/docs.dhtmlx.com\/vault\/whats_new.html\" rel=\"noopener\" target=\"_blank\">What&#8217;s New in Vault 3.0<\/a><\/li>\n<li><a href=\"https:\/\/snippet.dhtmlx.com\/6dvbdt6s?tag=vault\" rel=\"noopener\" target=\"_blank\">Samples<\/a><\/li>\n<li><a href=\"https:\/\/docs.dhtmlx.com\/vault\/angular_integration.html\" rel=\"noopener\" target=\"_blank\">Vault for Angular<\/a><\/li>\n<li><a href=\"https:\/\/docs.dhtmlx.com\/vault\/react_integration.html\" rel=\"noopener\" target=\"_blank\">Vault for React<\/a><\/li>\n<li><a href=\"https:\/\/docs.dhtmlx.com\/vault\/vuejs_integration.html\" rel=\"noopener\" target=\"_blank\">Vault for Vue.js<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>dhtmlxVault 3.0 is a completely renewed version of our JavaScript file upload and manager component. V 3.0 provides a very simple way to build file uploaders due to the &#8230;<\/p>\n","protected":false},"author":101012,"featured_media":5466,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[70,1,38],"tags":[59,16,56,4,55],"class_list":["post-5408","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-releases","category-uncategorized","category-visible","tag-angular","tag-dhtmlxvault","tag-react","tag-dhtmlx-updates","tag-vue-js"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/5408","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/users\/101012"}],"replies":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/comments?post=5408"}],"version-history":[{"count":4,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/5408\/revisions"}],"predecessor-version":[{"id":14176,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/5408\/revisions\/14176"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/5466"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=5408"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=5408"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=5408"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}