19.7 File Upload Controls

HTML Element: <INPUT TYPE="FILE" ...> (No End Tag)

Attributes: NAME (required), VALUE (ignored), SIZE , MAXLENGTH , ACCEPT , ONCHANGE , ONSELECT , ONFOCUS , ONBLUR (nonstandard)

This element results in a filename textfield next to a Browse button. Users can enter a path directly in the textfield or click on the button to bring up a file selection dialog that lets them interactively choose the path to a file. When the form is submitted, the contents of the file are transmitted as long as an ENCTYPE of multipart/form-data was specified in the initial FORM declaration. For multipart data, you also need to specify POST as the method type. This element provides a convenient way to make user-support pages, with which the user sends a description of a problem along with any associated data or configuration files.

Core Approach

Always specify ENCTYPE="multipart/form-data" and METHOD="POST" in forms with file upload controls.

Unfortunately, the servlet API provides no high-level tools to read uploaded files; you have to call request.getInputStream and parse the request yourself. Fortunately, numerous third-party libraries are available for this task. One of the most popular is from the Jakarta Commons library; for details, see http://jakarta.apache.org/commons/fileupload/.

NAME

The NAME attribute identifies the textfield to the server-side program.

VALUE

For security reasons, this attribute is ignored; only the end user can specify a filename. Otherwise, a malicious HTML author could steal client files by specifying a filename and then using JavaScript to automatically submit the form when the page is loaded.

SIZE and MAXLENGTH

The SIZE and MAXLENGTH attributes are used the same way as in textfields , specifying the number of visible and maximum allowable characters , respectively.

ACCEPT

The ACCEPT attribute is intended to be a comma-separated list of MIME types used to restrict the available filenames. However, very few browsers support this attribute.

ONCHANGE, ONSELECT, ONFOCUS, and ONBLUR

These attributes are used by browsers that support JavaScript to specify the action to take when the mouse leaves the textfield after a change has occurred, when the user selects text in the textfield, when the textfield gets the input focus, and when the textfield loses the input focus, respectively.

For example, the code in Listing 19.11 creates a file upload control. Figure 19-20 shows the initial result, and Figure 19-21 shows a typical pop-up window that results when the Browse button is activated.

Listing 19.11 Example of a file upload control

 <FORM ACTION="http://localhost:8088/SomeProgram"       ENCTYPE="multipart/form-data" METHOD="POST"> Enter data file below:<BR> <INPUT TYPE="FILE" NAME="fileName"> </FORM> 

Figure 19-20. Initial look of a file upload control.

Figure 19-21. A file chooser resulting from the user clicking on Browse in a file upload control on Windows 2000 Professional.