Document Upload Flow

Purpose

• Support single and multi-file ingestion for loan documents.
• Provide clear processing feedback and failure recovery paths.

Primary User

• Primary persona: Loan Operations Officer
• Secondary persona: Bank IT / Deployment Admin

Layout

• Frame: document-upload-flow
• Grid: grid.columns=12, grid.columnWidth, grid.gutter
• Shell: SF/Global/Nav/Sidebar/Expanded, SF/Global/Nav/Header/Default
• Main content sections:

1. Drop zone centered at upper content block.
2. File list block below drop zone.
3. Progress status bar in list item rows.

Components

Component name	Position	Size	Data	States
SF/Global/Nav/Sidebar/Expanded	Left shell	mapped default	nav data	expanded
SF/Global/Nav/Header/Default	Top shell	mapped default	title, user metadata	default
SF/Upload/DropZone/Default	Main columns 2-11, first content block	mapped default	instruction_text, accepted_types	default
SF/Upload/DropZone/Hover	same as above	mapped default	drag_overlay_text	hover
SF/Upload/DropZone/Uploading	same as above	mapped default	upload_count, aggregate_progress	uploading
SF/Upload/DropZone/Success	same as above	mapped default	success_count	success
SF/Upload/DropZone/Error	same as above	mapped default	error_message	error
SF/Upload/FileList/Item/Queued	Main columns 2-11, list row	mapped default	file_name, size, queued_at	queued
SF/Upload/FileList/Item/Processing	Main columns 2-11, list row	mapped default	file_name, percent_complete	processing
SF/Upload/FileList/Item/Complete	Main columns 2-11, list row	mapped default	file_name, completed_at, document_id	complete
SF/Upload/FileList/Item/Failed	Main columns 2-11, list row	mapped default	file_name, error_code	failed
SF/Upload/ProgressBar/Default	Inside processing row	mapped default	percent_complete	default

Data Fields

Field key	Type	Source	Display token
file_name	string	user	typography.body.sm
file_size	string	system	typography.body.sm
upload_status	enum	system	typography.label.sm
percent_complete	number	system	typography.label.sm
error_code	string	system	typography.body.sm
error_message	string	system	typography.body.sm
uploaded_at	datetime	system	typography.body.sm

States

Loading

• Frame loads shell and section headings.
• Drop zone rendered as SF/Upload/DropZone/Default with disabled interactions.

Empty

• No files present.
• Drop zone copy includes supported types and max file count.

Error

• Drop zone state switches to SF/Upload/DropZone/Error.
• Failed files use SF/Upload/FileList/Item/Failed with retry action.

Populated

• Multiple files rendered in list with mixed states.
• Processing rows include SF/Upload/ProgressBar/Default.

Feature-Specific

• drag-and-drop-active
• Trigger: file drag over drop zone.
• Visual: SF/Upload/DropZone/Hover plus accent border token.

Navigation Targets

Interactive element	Target screen	Interaction
Sidebar Dashboard	dashboard-home	click
Sidebar Documents	document-upload-flow	click
Completed file row	extraction-review-screen	click
Retry action for failed row	document-upload-flow	click

Content Map Key

• content_map_key: document-upload
• Help panel link: 02-user-docs/features/document-upload.md

Accessibility Notes

• Drop zone supports keyboard-triggered file selection.
• Status updates expose live region text for assistive technologies.
• Error rows include non-color indicators and text labels.