{"id":3847,"date":"2016-12-12T13:00:01","date_gmt":"2016-12-12T09:00:01","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=3847"},"modified":"2026-01-30T11:48:04","modified_gmt":"2026-01-30T08:48:04","slug":"dhtmlxvault-use-file-upload-component","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/dhtmlxvault-use-file-upload-component\/","title":{"rendered":"dhtmlxVault: When and How to Use File Upload Component"},"content":{"rendered":"<p>If you plan to create a web application that, among the other useful features, allows a user to upload some files to the server, you should take care of neat and handy <a href=\"\/\/dhtmlx.com\/docs\/products\/dhtmlxVault\/\">upload component<\/a>. In this case, dhtmlxVault is exactly what you need, and would be a great add-on to <a href=\"\/\/dhtmlx.com\/docs\/products\/dhtmlxSuite\/\">dhtmlxSuite library<\/a>. Let&#8217;s take a look at its basic features.<\/p>\n<p><strong><a href=\"\/\/dhtmlx.com\/docs\/products\/dhtmlxVault\/download.shtml\" onclick=\"ga('send', 'event', 'link', 'click', 'download-vault-overview-blog')\">Download dhtmlxVault and start exploring now<\/a><\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2016\/12\/dhx-vault.png\" alt=\"dhx-vault\" width=\"1996\" height=\"1092\" class=\"aligncenter size-full wp-image-3860\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2016\/12\/dhx-vault.png 1996w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2016\/12\/dhx-vault-300x164.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2016\/12\/dhx-vault-768x420.png 768w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2016\/12\/dhx-vault-1024x560.png 1024w\" sizes=\"auto, (max-width: 1996px) 100vw, 1996px\" \/><\/p>\n<ul>\n<li>This JavaScript file upload component has the <strong>progress bar<\/strong> that displays the upload progress and the estimated time remaining for an upload<\/li>\n<li><strong>Drag-and-drop<\/strong> functionality simplifies adding files to the upload queue.<\/li>\n<li>Support of <strong>different server-side platforms<\/strong> such as PHP, Java, and ASP.NET allows you to use it in different types of projects<\/li>\n<li><strong>Upload restrictions<\/strong> allow controlling the types of files that can be uploaded to your server. If your app works with multimedia files, you can define the proper file extensions to avoid the possible mess. You can also control the size and number of the uploaded files, or even set the overall size of the upload <\/li>\n<li>If you already have some files on the server, you can display the <strong>list of the uploaded files<\/strong><\/li>\n<li><strong>Styling<\/strong> features allows changing skins, customizing icons, and localizing dhtmlxVault<\/li>\n<li>And don&#8217;t forget that you can always <strong>attach dhtmlxVault to the other DHTMLX components<\/strong> such as Layout, Accordion, Tabbar, Window, or Popup<\/li>\n<\/ul>\n<p>We bet that you can&#8217;t wait to learn how you can use this component. Well, let&#8217;s proceed with the practical part.<\/p>\n<h4>Creating Upload Component on a Page<\/h4>\n<p>The process of creation will consist of two parts: client side and server side. We&#8217;ll concentrate on the minimalist version of a component just to show you how everything works. A server-side example will be written in PHP, so make sure that you have a running web server before proceeding. After you <a href=\"\/\/dhtmlx.com\/docs\/products\/dhtmlxVault\/download.shtml\">download the dhtmlxVault package<\/a>, we&#8217;ll be ready to continue.<\/p>\n<p>First, unpack the required files and add them to the page:<\/p>\n<div class=\"codecolorer-container javascript default codecolorer-noborder\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"sy0\">&lt;<\/span>link rel<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;stylesheet&quot;<\/span> type<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;text\/css&quot;<\/span> href<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;dhtmlxvault.css&quot;<\/span><span class=\"sy0\">\/&gt;<\/span><br \/>\n<span class=\"sy0\">&lt;<\/span>script src<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;dhtmlxvault.js&quot;<\/span><span class=\"sy0\">&gt;&lt;\/<\/span>script<span class=\"sy0\">&gt;<\/span><\/div><\/div>\n<p>Then you should define a div container where you&#8217;re going to place a component:<\/p>\n<div class=\"codecolorer-container html4strict default codecolorer-noborder\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"html4strict codecolorer\"><span class=\"sc2\">&lt;<span class=\"kw2\">div<\/span> <span class=\"kw3\">id<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;vaultObj&quot;<\/span> <span class=\"kw3\">style<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;width:400px; height:250px;&quot;<\/span>&gt;&lt;<span class=\"sy0\">\/<\/span><span class=\"kw2\">div<\/span>&gt;<\/span><\/div><\/div>\n<p>Now, within the <script><\/script> tags, create a dhtmlxVaultObject instance. To do so, we need to define a proper container and a path to the server script. You can use Flash or Silverlight uploader, for example. But we&#8217;ll choose probably, the most common option: html4\/html5 uploader. Thus, we&#8217;ll have to use the uploadUrl key along with the path to the corresponding script file. Here&#8217;s the code we need:<\/p>\n<div class=\"codecolorer-container javascript default codecolorer-noborder\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"sy0\">&lt;<\/span>script<span class=\"sy0\">&gt;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">var<\/span> myVault <span class=\"sy0\">=<\/span> <span class=\"kw1\">new<\/span> dhtmlXVaultObject<span class=\"br0\">&#40;<\/span><span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"co1\">\/\/ html container for vault<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; container<span class=\"sy0\">:<\/span> &nbsp;<span class=\"st0\">&quot;vaultObj&quot;<\/span><span class=\"sy0\">,<\/span> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"co1\">\/\/ html4\/html5 upload url<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; uploadUrl<span class=\"sy0\">:<\/span> &nbsp;<span class=\"st0\">&quot;server.php&quot;<\/span><span class=\"sy0\">,<\/span> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"sy0\">&lt;\/<\/span>script<span class=\"sy0\">&gt;<\/span><\/div><\/div>\n<p>At this step, the very basic configuration of the client side is finished and we can proceed with the server side. The PHP code example below assumes that you have a folder named uploads on your server. You should also be sure that you set the required permissions.<\/p>\n<p>Here&#8217;s the content of the server.php file:<\/p>\n<div class=\"codecolorer-container php default codecolorer-noborder\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"php codecolorer\"><span class=\"kw2\">&lt;?php<\/span><br \/>\n<span class=\"kw1\">if<\/span> <span class=\"br0\">&#40;<\/span><span class=\"sy0\">@<\/span><span class=\"re0\">$_REQUEST<\/span><span class=\"br0\">&#91;<\/span><span class=\"st0\">&quot;mode&quot;<\/span><span class=\"br0\">&#93;<\/span> <span class=\"sy0\">==<\/span> <span class=\"st0\">&quot;html5&quot;<\/span> <span class=\"sy0\">||<\/span> <span class=\"sy0\">@<\/span><span class=\"re0\">$_REQUEST<\/span><span class=\"br0\">&#91;<\/span><span class=\"st0\">&quot;mode&quot;<\/span><span class=\"br0\">&#93;<\/span> <span class=\"sy0\">==<\/span> <span class=\"st0\">&quot;flash&quot;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">if<\/span> <span class=\"br0\">&#40;<\/span><span class=\"sy0\">@<\/span><span class=\"re0\">$_REQUEST<\/span><span class=\"br0\">&#91;<\/span><span class=\"st0\">&quot;zero_size&quot;<\/span><span class=\"br0\">&#93;<\/span> <span class=\"sy0\">==<\/span> <span class=\"st0\">&quot;1&quot;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"co1\">\/\/ IE10, IE11 zero file fix<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"co1\">\/\/ get file name<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"re0\">$filename<\/span> <span class=\"sy0\">=<\/span> <span class=\"sy0\">@<\/span><span class=\"re0\">$_REQUEST<\/span><span class=\"br0\">&#91;<\/span><span class=\"st0\">&quot;file_name&quot;<\/span><span class=\"br0\">&#93;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"co1\">\/\/ just create empty file<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw3\">file_put_contents<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;uploads\/&quot;<\/span><span class=\"sy0\">.<\/span><span class=\"re0\">$filename<\/span><span class=\"sy0\">,<\/span> <span class=\"st0\">&quot;&quot;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span> <span class=\"kw1\">else<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"co1\">\/\/ get file name<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"re0\">$filename<\/span> <span class=\"sy0\">=<\/span> <span class=\"re0\">$_FILES<\/span><span class=\"br0\">&#91;<\/span><span class=\"st0\">&quot;file&quot;<\/span><span class=\"br0\">&#93;<\/span><span class=\"br0\">&#91;<\/span><span class=\"st0\">&quot;name&quot;<\/span><span class=\"br0\">&#93;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"co1\">\/\/ save file<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw3\">move_uploaded_file<\/span><span class=\"br0\">&#40;<\/span><span class=\"re0\">$_FILES<\/span><span class=\"br0\">&#91;<\/span><span class=\"st0\">&quot;file&quot;<\/span><span class=\"br0\">&#93;<\/span><span class=\"br0\">&#91;<\/span><span class=\"st0\">&quot;tmp_name&quot;<\/span><span class=\"br0\">&#93;<\/span><span class=\"sy0\">,<\/span> <span class=\"st0\">&quot;uploads\/&quot;<\/span><span class=\"sy0\">.<\/span><span class=\"re0\">$filename<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"co1\">\/\/ response<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw3\">header<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;Content-Type: text\/json&quot;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw3\">print_r<\/span><span class=\"br0\">&#40;<\/span><span class=\"kw3\">json_encode<\/span><span class=\"br0\">&#40;<\/span><span class=\"kw3\">array<\/span><span class=\"br0\">&#40;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;state&quot;<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"kw4\">true<\/span><span class=\"sy0\">,<\/span> &nbsp; &nbsp;<span class=\"co1\">\/\/ saved or not saved<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;name&quot;<\/span> &nbsp;<span class=\"sy0\">=&gt;<\/span> <span class=\"re0\">$filename<\/span><span class=\"sy0\">,<\/span> &nbsp; <span class=\"co1\">\/\/ server-name<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;extra&quot;<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"kw3\">array<\/span><span class=\"br0\">&#40;<\/span> &nbsp; <span class=\"co1\">\/\/ extra info, optional<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;info&quot;<\/span> &nbsp;<span class=\"sy0\">=&gt;<\/span> <span class=\"st0\">&quot;just a way to send some extra data&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;param&quot;<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"st0\">&quot;some value here&quot;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#41;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#41;<\/span><span class=\"br0\">&#41;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><br \/>\n<span class=\"sy1\">?&gt;<\/span><\/div><\/div>\n<p>IE10 and IE11 have a problem with uploading zero-size files in the html5 mode, so we should use a little workaround: once we detect that a file with zero size is going to be uploaded params zero_size=1 andfile_name=somename.ext will be sent to the server. Otherwise, we can move the uploaded file to the uploads folder. The state and name params of the response are mandatory and extra is optional.<\/p>\n<p>The coding part is finished, and we can check the results. Open your project in the browser, and you&#8217;ll see the file upload component on the page. You can use the Add files button to check the files that you want to upload:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2016\/12\/file-uploader-vault.png\" alt=\"file uploader vault\" width=\"556\" height=\"360\" class=\"aligncenter size-full wp-image-3851\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2016\/12\/file-uploader-vault.png 556w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2016\/12\/file-uploader-vault-300x194.png 300w\" sizes=\"auto, (max-width: 556px) 100vw, 556px\" \/><\/p>\n<p>The uploaded files should appear within the <em>uploads<\/em> folder.<\/p>\n<p>That&#8217;s how you can create a basic JavaScript file upload component on a page. If you&#8217;re wondering how further customization can change the behavior of dhtmlxVault, you can check the <a href=\"https:\/\/snippet.dhtmlx.com\/6dvbdt6s?tag=vault\">demo page<\/a>. To learn how to make such customization, check the <a href=\"https:\/\/docs.dhtmlx.com\/vault\/customization.html\">documentation page<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you plan to create a web application that, among the other useful features, allows a user to upload some files to the server, you should take care of &#8230;<\/p>\n","protected":false},"author":2,"featured_media":3855,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,72,1,38],"tags":[33,16],"class_list":["post-3847","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-posts-for-codeproject-com","category-general","category-uncategorized","category-visible","tag-all-posts","tag-dhtmlxvault"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/3847","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\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/comments?post=3847"}],"version-history":[{"count":3,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/3847\/revisions"}],"predecessor-version":[{"id":14184,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/3847\/revisions\/14184"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/3855"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=3847"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=3847"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=3847"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}