Uploading data using online forms was first introduced into HTML via the now familiar file upload feature. In HTML forms, this feature was added to the input control by adding an extra attribute that caused the input control to be represented using a file picker dialog. Today, Web sites commonly use this feature to allow for the creation of attachments when sending e-mail using Web-mediated e-mail services.
XForms defines element upload to enable equivalent functionality. Control upload goes further in the functionality provided. At the time HTML forms were designed, Web browsers ran primarily on desktop machines, and this made file upload the primary use case for this functionality. Today, Web access is available on a variety of devices ranging from desktop clients to PDAs and mobile phones. As a result, the ability to upload data has far wider applicability than merely uploading a file. For instance, a cell phone that is equipped with a digital camera might use control upload to create user interfaces that allow the user to transmit pictures taken with the on-board camera.
XForms user interface control upload has been designed to cover all of these use cases. This flexibility comes from designing the control as an abstract upload data control, rather than as a file browser . Notice that this allows the control to be used effectively on devices that may not contain a file system but have the ability to capture data, for example, scanners and digital cameras .
Like the rest of the XForms user interface controls, control upload can use all of the common attributes and child elements defined in Section 3.2. XForms binding attributes are used to specify the location in the data model that is to hold the data to upload. Control upload collects binary data and should bind to instance data having type anyURI , xsd:base64Binary , or xsd:hexBinary . The following special attributes and child elements can be used to tune further the behavior of control upload :
Figure 3.22 shows the use of control upload to create a user interface that allows the user to transmit an image. A visual interface might render this control as a file browser (see Figure 3.23).
Figure 3.22 Element upload enables uploading data from a variety of devices.
< html xmlns ="http://www.w3.org/1999/xhtml"> < head >< title >Image Upload</ title > < model xmlns ="http://www.w3.org/2002/xforms" id ="message"> < instance > < mail xmlns =""> < picture filename ="" content-type =""> < attach1 xsi:type ="xsd:base64Binary"/> </ picture > </ mail ></ instance > </ model ></ head > < body > < group xmlns ="http://www.w3.org/2002/xforms"> < upload ref ="/mail/picture/attach1" mediatype ="image/jpg"> < label >Select image:</ label > < filename ref ="../@filename"/> < mediatype ref ="../@content-type"/> </ upload ></ group > </ body ></ html >
Figure 3.23. Visual interface that enables uploading data.
When used in an environment having a file system, control upload , shown in Figure 3.22, might be rendered as a file dialog that allows the user to pick from a collection of images. Attribute mediatype requests that the user be presented with images of type image/jpg .
If the user selects file bubbles .jpg , the binary data contained in that file will be encoded as base64Binary and stored in the instance as specified by the binding attributes on control upload . Elements filename and mediatype specify the locations that will hold the filename and content type of the selected image. Thus, the instance data after selecting file bubbles.jpg might look like the XML tree shown in Figure 3.24.
Figure 3.24 Instance data corresponding to image upload.
< mail > < picture filename ="bubbles.jpg" content-type ="image/jpg"> < attach1 > /9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA0JCgsK ... RobjMxr2gfdCFHiU8dRVmSIktsBqLIVxnfX/ 2Q == </ attach1 ></ picture > </ mail >
Notice that this user interaction can be deployed meaningfully to a desktop client that contains a file system, as well as to devices that do not necessarily contain a traditional file system.