Browser-based file uploads, in particular those involving the
HTML
<input type="file"> tag, have always been
rather lacking. As I am sure most of you are aware, uploading files
exceeding 10MB often causes a very poor user experience. Once a
user submits the file, the browser will appear to be inactive while
it attempts to upload the file to the server. While this happening
in the background, many impatient users would start to assume that
the server is "hanging" and would try to submit the file again.
This of course, only helps to make matters worse.
In an attempt to make uploading of files more user-friendly,
many sites display an indeterminate progress animation (such as a
rotating icon) once the user submits the file. Although this
technique may be useful in keeping the user distracted while the
upload being submitted to the server, it offers very little
information on the status of the file upload. Another attempt at
solving the problem is to implement an applet that uploads the file
to the server through FTP. The drawback with this solution is that
it limits your audience to those that have a Java-enabled
browser.
In this article, we will take fresh approach and implement an
AJAX-powered component that will not only upload the file to
server, but also monitor the actual progress of a file upload
request in "real time." The four stages of this component are
illustrated below, in Figures 1, 2, 3, and 4:
Figure 1. Stage 1: Selecting the file upload
Figure 2. Stage 2: Uploading the file to the server
Figure 3. Stage 3: Uploaded completed
Figure 4. File upload summary
