Receipt Thumbnail Preview Widget
Component Detail
Description
Displays a thumbnail of the captured or selected receipt image before form submission. Shows a remove button, file type indicator for PDFs, and upload progress overlay. Provides clear accessibility labels describing the attached file name and type for screen reader users.
receipt-thumbnail-preview
Summaries
Providing clear visual confirmation that a receipt has been successfully attached before form submission significantly reduces claim rejection rates caused by missing documentation. This component gives peer mentors immediate, unambiguous feedback about the attachment state — including upload progress and any errors — reducing support requests and resubmission cycles that create administrative overhead for coordinators. PDF support broadens the range of acceptable receipt formats, accommodating digital invoices and bank statements that are increasingly common as paper receipts decline, which directly reduces the friction of compliance for mentors.
A low-complexity, self-contained UI widget with no external service dependencies, making it straightforward to build, test, and deliver independently. It must be completed before the `receipt-camera-sheet` component can be fully integrated, as it is a declared dependency. Test cases must cover the image thumbnail render path, the PDF icon fallback path, all three upload state transitions (in-progress, complete, error), and the remove/replace actions. Accessibility label accuracy for each state should be verified with screen reader tooling.
Given the low complexity and no backend dependencies, this component carries minimal delivery risk.
A stateful Flutter widget that accepts an `imageFile` (either a local `File` or a remote URL after upload) and an `uploadProgress` double (0.0–1.0) as inputs. Image thumbnails are rendered using `Image.file()` with a fixed-size `BoxFit.cover` crop; PDFs are detected by file extension and display a document icon placeholder instead. The upload progress overlay uses a `Stack` with a semi-transparent `LinearProgressIndicator` anchored to the bottom of the thumbnail. `setUploadComplete()` receives the Supabase storage path for downstream form state, while `setUploadError()` triggers an inline error banner.
All interactive elements (remove, replace) are wrapped in `Semantics` with descriptive `label` and `hint` properties for full screen reader compatibility.
Responsibilities
- Render compressed image thumbnail or PDF icon
- Show upload progress overlay as a non-blocking indicator
- Expose remove/replace action for the attached receipt
- Provide semantic labels for VoiceOver and TalkBack
- Display file size and type metadata as subtitle text
Interfaces
build(imageFile, uploadProgress)
onRemoveTapped()
onReplaceTapped()
setUploadProgress(double progress)
setUploadComplete(String storagePath)
setUploadError(String error)
Relationships
Used Integrations (1)
External integrations and APIs this component relies on