File Upload with Struts and jQuery

This is an attempt to write the front-end of the file upload application with the form validation. You can find lots of business logic to implement files uploading using Struts. This article is to design the form itself rather than rewriting those codes. Recently I have been working on the front end of file upload application so I am going to share these with all. Front frame work is Struts and jQuery Validation plugin is used for form validation.

To begin with first write a JSP page with the form containing the some text box and some file type text box.

In above code things to note is 'styleId' attribute is used. This 'styleId' attribute is equivalent of 'id' attribute of HTML tags. The reason using this is Struts tags doesn't have 'id' attribute. Another thing to consider is property value for file type text box. This is assigned as same name but with different array index. The advantage of doing this is when form bean initilized these value can be initialized in array list.

Next we can define the Form Bean to capture the data from the form as follow:

Here we define a list type variable 'fileList' to hold the file information. Getter method to it to return the list of files and getter/setter method to get file info as FormFile.

• void setFile(int index FormFile formFile): This setter method store the file represent by FormFile to an list.
• FormFile getFile(int i): This getter method return the file as a FormFile store in the list.
• List getFileList(): This getter method return the list of file to be upload.

Finally we can write action class to do business logic as follow:

The uniqueness of this solution is it is implemented with Struts html tag unlike other's input tag. Query validation is implemented so even when validation fail form fields are need not to be re-entered again.

Further some enhancement need to be done in future which includes but not limited to:

• Dynamically add file upload text box. (Struts tags are render at server side so they can't be created dynamically using JavaScript. AJAX need to be used.)
• Validate email of particular domain.
• Check empty file at client side.
• Add CSS.
• Add progress bar.

Complete project code in NetBeans can be requested through anjibcsathotmail.com