dhtmlxVault: When and How to Use File Upload Component

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 upload component. In this case, dhtmlxVault is exactly what you need, and would be a great add-on to dhtmlxSuite library. Let’s take a look at its basic features.

Support of different server-side platforms such as PHP, Java, and ASP.NET allows you to use it in different types of projects

Upload restrictions 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

If you already have some files on the server, you can display the list of the uploaded files

And don’t forget that you can always attach dhtmlxVault to the other DHTMLX components such as Layout, Accordion, Tabbar, Window, or Popup

We bet that you can’t wait to learn how you can use this component. Well, let’s proceed with the practical part.

Creating Upload Component on a Page

The process of creation will consist of two parts: client side and server side. We’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 download the dhtmlxVault package, we’ll be ready to continue.

Then you should define a div container where you’re going to place a component:

<divid="vaultObj"style="width:400px; height:250px;"></div>

Now, within the 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’ll choose probably, the most common option: html4/html5 uploader. Thus, we’ll have to use the uploadUrl key along with the path to the corresponding script file. Here’s the code we need:

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.

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.

The coding part is finished, and we can check the results. Open your project in the browser, and you’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:

The uploaded files should appear within the uploads folder.

That’s how you can create a basic JavaScript file upload component on a page. If you’re wondering how further customization can change the behavior of dhtmlxVault, you can check the demo page. To learn how to make such customization, check the documentation page.