InputFile Usage Guideline

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

Guideline Contents

• General Principles
• Elements
• Prompt
• Text Box
• Value
• Browse/Update Button
• Required Field Indicator
• Changed Field Indicator
• Help Text

Related Guidelines

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:

General Principles

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

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

The following image shows elements of an inputFile component.

Elements in an inputFile Component

Prompt

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

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

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.

Browse/Update Button

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

Required Field Indicator

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

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

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.