# <netui:fileUpload> Tag

Renders an HTML input tag with which users can browse, select, and upload files from their local machine.

## Syntax

<netui:fileUpload
[accept="string_acceptTheseMIMETypes"]
dataSource="expression_datasource"
[onBlur="string_onBlur"]
[onChange="string_onChange"]
[onClick="string_onClick"]
[onDblClick="string_onDblClick"]
[onFocus="string_onFocus"]
[onKeyDown="string_onKeyDown"]
[onKeyPress="string_onKeyPress"]
[onKeyUp="string_onKeyUp"]
[onMouseDown="string_onMouseDown"]
[onMouseMove="string_onMouseMove"]
[onMouseOut="string_onMouseOut"]
[onMouseOver="string_onMouseOver"]
[onMouseUp="string_onMouseUp"]
[onSelect="string_onSelect"]
[readonly="boolean_readOnly"]
[size="integer_fieldSize"]
[style="string_Style"]
[styleClass="string_Class"]
[tabindex="string_tabIndex"]
[tagId="string_tagId"] />

## Description

Renders an HTML input tag with which users can browse, select, and upload files from their local machine.

To successfully upload files, the following two conditions must be met:

> - The <netui:fileUpload> tag must have a parent <netui:form> tag with the attribute `enctype="multipart/form-data"`

>            <netui:form action="uploadFile" enctype="multipart/form-data">
>            ...
>                <netui:fileUpload tagId="inputbox" dataSource="{actionForm.theFile}" />
>            ...
>            </netui:form>

> - The `dataSource` attribute must point to a Form Bean field of type `org.apache.struts.upload.FormFile`.

>           public static class UploadFileForm extends FormData
>           {
>               private org.apache.struts.upload.FormFile theFile;

>               public void setTheFile(org.apache.struts.upload.FormFile theFile)
>               {
>                   this.theFile = theFile;
>               }

>               public org.apache.struts.upload.FormFile getTheFile()
>               {
>                   return this.theFile;
>               }
>           }

The `dataSource` attribute for the <netui:fileUpload> tag is write-only. This means that the value of the <netui:fileUpload> tag cannot be read back into the tag on postback.

## Attributes

accept | The set of MIME types accepted for file upload.
Required | Supports runtime expression evaluation | Data bindable
No | No | No
dataSource | The `dataSource` attribute determines both (1) the source of populating data for the tag and (2) the object to which the tag submits data. For example, assume that the Controller file (= JPF file) contains a Form Bean with the property foo. Then the following <netui:textBox> tag will (1) draw populating data from the Form Bean's foo property and (2) submit user defined data to the same property. `<netui:textBox dataSource="{actionForm.foo}" />` The `dataSource` attribute takes either a data binding expression or the name of a Form Bean property. In the above example, `<netui:textBox dataSource="foo" />` would have the exactly same behavior. When the tag is used to submit data, the data binding expression must refer to a Form Bean property. In cases where the tag is not used to submit data, but is used for displaying data only, the data binding expression need not refer to a Form Bean property. For example, assume that myIterativeData is a member variable on the Controller file ( = JPF file). The following <netui-data:repeater> tag draws its data from myIterativeData. `<netui-data:repeater dataSource="{pageFlow.myIterativeData}">`
Required | Supports runtime expression evaluation | Data bindable
Yes | No | Read / Write
onBlur | The onBlur JavaScript event.
Required | Supports runtime expression evaluation | Data bindable
No | Yes | No
onChange | The onChange JavaScript event.
Required | Supports runtime expression evaluation | Data bindable
No | Yes | No
onClick | The onClick JavaScript event.
Required | Supports runtime expression evaluation | Data bindable
No | Yes | No
onDblClick | The onDblClick JavaScript event.
Required | Supports runtime expression evaluation | Data bindable
No | Yes | No
onFocus | The onFocus JavaScript event.
Required | Supports runtime expression evaluation | Data bindable
No | Yes | No
onKeyDown | The onKeyDown JavaScript event.
Required | Supports runtime expression evaluation | Data bindable
No | Yes | No
onKeyPress | The onKeyPress JavaScript event.
Required | Supports runtime expression evaluation | Data bindable
No | Yes | No
onKeyUp | The onKeyUp JavaScript event.
Required | Supports runtime expression evaluation | Data bindable
No | Yes | No
onMouseDown | The onMouseDown JavaScript event.
Required | Supports runtime expression evaluation | Data bindable
No | Yes | No
onMouseMove | The onMouseMove JavaScript event.
Required | Supports runtime expression evaluation | Data bindable
No | Yes | No
onMouseOut | The onMouseOut JavaScript event.
Required | Supports runtime expression evaluation | Data bindable
No | Yes | No
onMouseOver | The onMouseOver JavaScript event.
Required | Supports runtime expression evaluation | Data bindable
No | Yes | No
onMouseUp | The onMouseUp JavaScript event.
Required | Supports runtime expression evaluation | Data bindable
No | Yes | No
onSelect | The onSelect JavaScript event.
Required | Supports runtime expression evaluation | Data bindable
No | Yes | No
readonly | Boolean. Determines whether or not the file upload field is read-only.
Required | Supports runtime expression evaluation | Data bindable
No | No | No
size | Integer. The number of characters visible in the file upload field.
Required | Supports runtime expression evaluation | Data bindable
No | No | No
style | The style of the rendered HTML tag.
Required | Supports runtime expression evaluation | Data bindable
No | No | No
styleClass | The class of the rendered HTML tag.
Required | Supports runtime expression evaluation | Data bindable
No | No | No
tabindex | The tabIndex of the rendered HTML tag. This attribute determines the position of the tag in the sequence of page elements that the user may advance through by pressing the TAB key.
Required | Supports runtime expression evaluation | Data bindable
No | No | No
tagId | String value. Sets the `id` (or `name`) attribute of the rendered HTML tag. Note that the real id attribute rendered in the browser may be changed by the application container (for example, Portal containers may change the rendered id value to ensure the uniqueness of id's on the page). In this case, the real id rendered in the browser may be looked up through the JavaScript function getNetuiTagName( tagId, tag ). For example, assume that some tag's `tagId` attribute is set to `foo`.
        <netui:textBox tagId="foo" />
Then the following JavaScript function will return the real id attribute rendered in the browser:
        getNetuiTagName( "foo", this )
To get a <netui:form> element and all of its children elements in JavaScript, use the same JavaScript function `getNetuiTagName( tagId, tag )`. For example, assume that there is a <netui:form> whose tagId attribute is set to `bar`.
        <netui:form tagId="bar" >
Then the following JavaScript function will return the <netui:form> element and its children (packaged as an array).
        document[getNetuiTagName( "bar", this )]
To retreive the value entered into a <netui:textBox> within the <netui:form> tag, use the following JavaScript expression.
        document[getNetuiTagName("bar", this)][getNetuiTagName("foo", this)].value
The second parameter ensures that the JavaScript function begins its search within the correct Portlet scope. Pass the JavaScript keyword `this` as the second parameter. For detailed information on using the function `getNetuiTagName( tagId, tag )` see Using JavaScript in Page Flow and Portal Applications.
Required | Supports runtime expression evaluation | Data bindable
No | Yes | No

## Sample

In the following example, note the `enctype` attribute of the enclosing <netui:form> tag.

           <netui:form action="uploadFile" enctype="multipart/form-data">
              <netui:fileUpload tagId="inputbox" dataSource="{actionForm.theFile}" />
              <netui:button value="Upload File" />
          </netui:form>

Note that the <netui:fileUpload> tag submits the file to Form Bean property `theFile`. This property must be of type `org.apache.struts.upload.FormFile`:

        public static class UploadFileForm extends FormData
      {
          private org.apache.struts.upload.FormFile theFile;

          public void setTheFile(org.apache.struts.upload.FormFile theFile)
          {
              this.theFile = theFile;
          }

          public org.apache.struts.upload.FormFile getTheFile()
          {
              return this.theFile;
          }
      }

## Code Samples

[BEA_HOME]/weblogic81/samples/workshop/SamplesApp/WebApp/tagSamples/netui/fileUpload/browseForFile.jsp [BEA_HOME]/weblogic81/samples/workshop/SamplesApp/WebApp/handlingData/binaryFlow/insertDocumentContent.jsp

## Related Topics

<netui:fileUpload> Tag Sample

BinaryFlow Sample

Handling Images and Binary Data in Page Flows

<netui:form> Tag