AJAX + JSF component for High-Performance File Upload (1)

I. Introduction

Browser-based file upload, especially when the <input type = "file"> tag is included in the Web page for upload, there are still serious performance problems. We know that uploading files larger than 10 MB often results in a very painful user experience. Once a user submits a file, the interface appears static when the browser uploads the file to the server. As all this happens in the background, many impatient users start to think that the server is "suspended" and submit files again, which of course makes the situation worse.

To make the file upload more friendly as possible, once the user submits the file, many sites will display an intermediate process animation (such as a rotating icon ). Although this technology plays a role in uploading and submitting to the server, it still provides too little information about the file upload status. Another attempt to solve this problem is to implement an applet, which uploads files to the server through FTP. The disadvantage of this solution is that it limits your users and requires a browser that supports Java.

In this article, we will implement an AJAX-capable component that not only uploads files to the server, but also "monitors the actual file upload process in real time. The four phases of this component work are shown in figure 1, 2, 3, and 4 below:

Figure 1. Phase 1: Select File Upload

Figure 2. Phase 2: Upload the file to the server

Figure 3. Phase 3: Upload complete

Figure 4. Phase 4: File Upload Summary

Ii. implement this component

First, we analyze the process of creating multiple filters, which will allow us to process and monitor file uploads. Then, we will continue to implement the assumerver Faces (JSF) component-it will provide continuous feedback to users to support AJAX progress bars.

(1) multi-part Filtering: UploadMultipartFilter

A multi-part filtering task intercepts the upload of an object and writes the object to a temporary directory on the server. It also monitors the number of bytes received and determines the extent to which the file has been uploaded. Fortunately, there is now an excellent Jakarta-Commons open source library that can be used to analyze multiple HTTP requests and upload files to the server. What we need to do is expand the library and add the "Hook" we need to monitor how many bytes have been processed.

Public class UploadMultipartFilter implements Filter { Public void doFilter (ServletRequest request, ServletResponse response, FilterChain chain) Throws IOException, ServletException { HttpServletRequest hRequest = (HttpServletRequest) request; // Check whether we are processing a multi-part request String contentHeader = hRequest. getHeader ("content-type "); Boolean isMultipart = (contentHeader! = Null & contentHeader. indexOf ("multipart/form-data ")! =-1 ); If (isMultipart = false ){ Chain. doFilter (request, response ); } Else { UploadMultipartRequestWrapper wrapper = New UploadMultipartRequestWrapper (hRequest ); Chain. doFilter (wrapper, response ); } ... }

As you can see, the UploadMultipartFilter class simply checks whether the current request is a multi-part request. If the request does not contain file upload, the request will be passed to the next filter in the request chain without any additional processing. Otherwise, the request will be encapsulated in an UploadMultipartRequestWrapper.

(2) UploadMultipartRequestWrapper class

Public class UploadMultipartRequestWrapper Extends HttpServletRequestWrapper { Private Map <String, String> formParameters; Private Map <String, FileItem> fileParameters; Public UploadMultipartRequestWrapper (HttpServletRequest request ){ Super (request ); Try { ServletFileUpload upload = new ServletFileUpload (); Upload. setFileItemFactory ( New ProgressMonitorFileItemFactory (request )); List fileItems = upload. parseRequest (request ); FormParameters = new HashMap <String, String> (); FileParameters = new HashMap <String, FileItem> (); For (int I = 0; I <fileItems. size (); I ++ ){ FileItem item = (FileItem) fileItems. get (I ); If (item. isFormField () = true ){ FormParameters. put (item. getFieldName (), item. getString ()); } Else { FileParameters. put (item. getFieldName (), item ); Request. setAttribute (item. getFieldName (), item ); } } } Catch (FileUploadException fe ){ // The request time exceeds-The user may have already transferred to another page. // Make some records //... } ...

In the UploadMultipartRequestWrapper class, we will initialize the ServletFileUpload class, which analyzes our requests and writes the files to the default temporary directory on the server. The ServletFileUpload instance creates a FileItem instance (which contains file uploads and normal form elements) for each field encountered in the request ). Then, a FileItem instance is used to retrieve the attributes of a submitted field, or, when uploading a file, retrieves an InputStream of the underlying temporary file. In short, UploadMultipartRequestWrapper analyzes the file and sets any FileItem-it describes the file upload as a property in the request. These attributes are further collected by the JSF component, while the behavior of normal form fields remains unchanged.

By default, the general FileUpload library uses the DiskFileItems class instance to process file uploads. Although DiskFileItem is useful in processing the entire temporary file business, it is rarely supported in accurately monitoring the degree of processing of the file. Since Version 1.1, the general FileUpload library allows developers to specify the factory used to create FileItem. We will use the ProgressMonitorFileItemFactory and ProgressMonitorFileItem classes to overload the default behavior and monitor the File Upload process.