Attachment Preview Modal
Component Detail
Description
Full-screen modal that renders image or PDF content retrieved via a signed URL. Provides a download/share action and a close button, and handles loading and error states gracefully.
attachment-preview-modal
Summaries
The Attachment Preview Modal directly improves field worker productivity by allowing coordinators to view activity documentation — photos, PDFs — without leaving the mobile application. Eliminating the need to download files to a device gallery or open a separate viewer reduces friction in day-to-day reporting workflows, which translates to faster data capture and fewer transcription errors. The graceful error and loading state handling ensures that network hiccups do not leave staff confused or forced to restart tasks, protecting data integrity and reducing support overhead. A polished preview experience also signals professionalism to partner organisations and auditors reviewing submitted documentation.
The Attachment Preview Modal is a low-complexity UI component with a single external dependency on the Signed URL Service. Development effort is well-contained: the primary delivery risk is ensuring the signed URL is fetched before the modal renders and that both image and PDF rendering are tested across the range of target mobile devices and OS versions. QA must cover the loading state (slow network), error state (expired or invalid URL), and the download/share action on both iOS and Android. No backend work is required for this component.
It can be built and tested in parallel with other attachment feature work once the Signed URL Service contract is stable.
The Attachment Preview Modal consumes a single dependency — the Signed URL Service — via the `open(attachmentId, fileType)` interface, which triggers URL resolution before rendering. The component manages three render states internally: loading (while the signed URL is being fetched), error (on fetch failure or render failure), and content (image or PDF). File type branching should use the `fileType` parameter to select the appropriate renderer; consider a native PDF viewer library for iOS/Android compatibility. The `onDownloadRequested()` callback delegates share/download logic to the platform's share sheet.
Keep state management local to the modal; no global store mutations are needed. Ensure the modal unmounts cleanly to prevent memory leaks from partially loaded media streams.
Responsibilities
- Fetch and render attachment content from signed URL
- Display loading indicator while content loads
- Show error state if URL fetch or render fails
- Provide share/download action for the open file
Interfaces
open(attachmentId, fileType)
close()
onDownloadRequested()
showLoadingState()
showErrorState(message)
Relationships
Related Data Entities (1)
Data entities managed by this component
Used Integrations (1)
External integrations and APIs this component relies on