File Upload
- Terry Costantino (Unlicensed)
IN PROGRESS DRAFT
File upload allows users to include one or more files with a form.
When To Use
Use file upload when users are allowed and/or required to upload files to accompany a form such as an application or a service request. There are two main patterns, No List and Pre-Determined List. Within each pattern there are configurable elements (see below). In the case of multi-page forms (often presented with the "Stepper"), certain configurable elements are not recommended, such as pagination of the files uploaded.
Component Features
No List: Pre-Upload
ADD IMAGE
Standard Elements | Field Label | “Upload Image” (or Upload Images) or “Upload Document” (or Upload Documents) |
| Drag and Drop area | Including “Browse” button |
| “Start File Upload” Button |
|
| Field Instructions | Must be included but certain elements are configurable (see below) |
Configurable Elements | Title | “Upload Document” (or Upload Documents) |
| Introductory Text | On or Off. If “On”, no maximum on number of characters. |
| Field Instructions | The following text is recommended but the file types and maximum number of files are configurable. Maximum size for each file is capped at 5 MB . |
No List: During and After Upload
ADD IMAGE
Standard Elements | File Name + Format |
|
| File Size |
|
| “Remove” Button | Appears when a file has been dragged or found through browse but is not yet uploaded |
| “Delete” Button | Appears after the file has been uploaded |
| Response Message | “File Successfully Uploaded” or “Error: File Failed to Upload” |
Configurable Elements | Metadata Fields | On or Off. Up to 3 typical forms elements such as open text, drop-down, each of which can be optional or required for users. The form elements can be used for data such as File Name (to rename file), File Description, etc. |
Pre-Determined List: Pre-Upload (Page)
ADD IMAGE
Standard Elements | Title | “Upload Document” (or Upload Documents) |
| Table Columns | Two standard columns: Document Type and Status. Including additional columns is a configurable element (see below). |
| Table of Files | No maximum number of document types |
| “Attach” Button | Brings up the modal window |
Configurable Elements | Introductory Text | On or Off. No maximum on number of characters. |
| Search | On or Off. |
| Number of Results | On or Off. |
| Number of Entries | On or Off. |
| Table Columns | Up to 3 additional columns, such as Category, Required, etc. |
| Sort | On or Off. Simple toggle of ascending/descending. |
| Filter | On or Off for each column. If “On”, list of options needs to be defined. |
| Pagination | On or Off. Avoid using pagination of the table of files in a multi-page form that many also have “Previous” and “Next” buttons. |
| Total Documents Uploaded | On or Off. |
Pre-Determined List: Pre-Upload (Modal)
ADD IMAGE
Standard Elements | Title | File Upload |
| Document Name + Type |
|
| Field Instructions | Must be included but certain elements are configurable (see below). |
| Drag and Drop area | Including “Browse” button |
| “Start File Upload” Button |
|
| “Close” Button | In addition, include an “X” in the upper right. Both close the modal. |
Configurable Elements | Descriptive Text | On or Off. No maximum number of characters. |
| Field Instructions | The following text is recommended but the file types and maximum number of files are configurable. Maximum size for each file is capped at 5 MB . |
Pre-Determined List: During and After Upload (Modal)
ADD IMAGE
Standard Elements | File Name + Format |
|
| File Size |
|
| “Remove” Button | Appears when a file has been dragged or found through browse but is not yet uploaded |
| “Delete” Button | Appears after the file has been uploaded |
| Response Message | “File Successfully Uploaded” or “Error: File Failed to Upload” |
Configurable Elements | Metadata Fields | On or Off. Up to 3 typical forms elements such as open text, drop-down, each of which can be optional or required for users. The form elements can be used for data such as File Name (to rename file), File Description, etc. |
Pre-Determined List: During and After Upload (Page)
ADD IMAGE
Standard Elements | File name + Format | Displayed after the file has been uploaded |
| “Delete” button | Displayed after the file has been uploaded |
| Status Field | Updates with total number of files |
| “Attach/View” Button | “Attach” button becomes “Attach/View” button after one or more files has been uploaded. |
Configurable Elements | Metadata Fields | Contents of metadata fields are displayed after the file has been uploaded. |
Accessibility Criteria
Considerations
TBD
Keyboard Interaction
TBD