InputFile Usage Guideline Bookmark this Guideline Printable Page


RCUI Document Version 5.1.0 for Oracle® Fusion Middleware 11g Release 1 Patch Set 1 (11.1.1.2.0)
Last Updated 14-Feb-2011

The inputFile component allows users to select a locally accessible file for upload.

Guideline Contents

Note: Images in this guideline are provided as a general reference, and may not be exact representations of FusionFX pages.

Related Guidelines

Guideline Section For Information About
Input/Output Text All Text Box is used in the inputFile component; also contains manual truncation information.
Button All Buttons are used in the inputFile component.
Help Framework Help note window Help method used with inputFile component.
Message Framework All Message methods used with inputFile component.
Form Layout All Commonly used to organize inputFile components in a form.
Headers Truncation Truncation of long values in a text box.

Related ADF Elements

Refer to the ADF Faces Rich Client demos page to find demos and tag documentation for the ADF elements related to this component:

ADF Element Notes
af:inputFile inputFile component.

General Principles Bookmark this Heading Return to Top

Purpose:

Allows users to upload a file from any drive accessible on the user's system.

Examples:

  • The inputFile component is commonly used to attach files to an e-mail message or workflow notification.
  • When a sales representative registers a company as a potential customer, the inputFile component may be used to upload a scanned business card.

inputFile component showing the label, the text box and Browse button.

InputFile Component

Usage:

  • An inputFile component may be used within a toolbar, table cell, or form layout. An inputFile component may also be used as a stand-alone component.

Elements Bookmark this Heading Return to Top

The following image shows elements of an inputFile component.

Elements in an inputFile Component, with callouts to the Changed Field Indicator, Required Field Indicator, label, Text box and value, and the Browse button inherited from the browser.

Elements in an inputFile Component

Prompt Bookmark this Heading Return to Top

Purpose:

Identifies the purpose of the inputFile component.

Usage:

  • Use of prompts is strongly recommended in a form layout. In a table layout, the column header is the prompt.
  • There is no limit to the number of characters allowed in the prompt, but product teams must make sure that the layout allows for prompts to become up to 100 percent longer in translation.
  • Prompts may be placed before or above the text box. Place the prompt before the text box in most cases. If horizontal space is an issue, such as inside an accordion pane, place the prompt above the text box.
  • Prompts may be visually omitted when the function of the inputFile component is obvious to the product's users without displaying a label, typically because the preceding header helps identify the field.
  • When a prompt is visually omitted, provide a hidden prompt label so that accessibility tools, such as screen readers, can still read a prompt for the data.
  • Prompts should use headline capitalization. See Capitalization in the Language in UI guideline for details.

Text Box Bookmark this Heading Return to Top

Purpose:

Displays the value.

Description:

  • The text box is blank by default. When a file has already been selected, the box is replaced with a read-only text string that displays the value.

Usage:

  • The recommended default width of the text box is 30 characters (EMs) or 170 pixels; however, the width of the text box can be set by product teams.
  • The text box should be disabled when users are not able to select a value for the inputFile component, but it is still necessary to display the box because it may be enabled in different contexts.
  • The text box should be shown as read-only when data is displayed in a read-only page, such as a printable page. Read-only data may also be displayed when the user has permission to view the text, but not to edit it.
  • When possible, size the text box to fit the expected data, to avoid data clipping and to minimize scrolling.

Value Bookmark this Heading Return to Top

Purpose:

Specifies the location and name of the file to be uploaded.

Usage:

  • If a default or pre-existing value exists, it should be displayed regardless of the state of the inputFile component. Otherwise, the text box should be displayed without a value.
  • If the user is allowed to remove an uploaded file, place a Remove button after the Update button and raise a Yes/No warning message with the text "Remove file: <filename>?" when the Remove button is pressed. See the Message Framework guideline for information.
Note: Newer browsers do not allow users to type into the field of an inputFile component, making filename format validation for the value unnecessary, but validation will still occur when the field is required.

Browse/Update Button Bookmark this Heading Return to Top

Purpose:

Enables the user to browse for a file on the local hard drive, or to replace a file that has already been uploaded.

Description:

  • When a file has already been selected, the Browse button turns into the Update button
  • The Browse/Update button may not be disabled independently from the text box. When the text box is disabled, so is the Browse/Update button.
  • When the inputFile component is read-only, the Browse/Update button does not display.

InputFile Component with Update Button and Remove button

InputFile Component with Update Button and Remove Button

Required Field Indicator Bookmark this Heading Return to Top

Purpose:

Identifies fields that must be completed before submitting the page.

Description:

  • The Required Field Indicator is a text asterisk, *.
  • The Required Field Indicator does not display if the inputFile component is disabled or read-only.
  • ADF provides ALT text and tooltips to indicate required fields. Product teams may additionally provide key notation to define the Required Field Indicator. Refer to Key Notation in the Headers guideline for information regarding usage.

Usage:

  • The Required Field Indicator should be displayed when the file selection is mandatory on a page.
  • When a Required Field Indicator is used, product teams should add key notation to define the symbol.

Changed Field Indicator Bookmark this Heading Return to Top

Purpose:

Indicates that the value in the inputFile component changed after page submission.

  • ADF provides ALT text and tooltips to indicate changed fields. Product teams may additionally provide key notation to define the Changed Field Indicator. Refer to Key Notation in the Headers guideline for information regarding usage.

Usage:

  • The Changed Field Indicator should persist until the page is refreshed. If a scenario requires the Indicator to persist after page refresh, the Changed Field Indicator may remain displayed as long as needed. For example, when revising a résumé file, a Changed Field Indicator might show that the résumé has been updated.
  • When a Changed Field Indicator is used, product teams should add key notation to define the icon.

Help Text Bookmark this Heading Return to Top

Purpose:

Provides users with additional information about the inputFile component.

Usage:

Help text should be provided when users may be unclear about the result of their choice, or may have difficulty choosing the correct file type. See the Help Framework guideline for details.