Appearance
Mobile File Upload
Upload files from a mobile device for expense or absence approvals.
Route
/mobile-upload/:eorId/:approvalType
Overview
This page is designed for mobile use and allows workers to upload supporting files (photos or PDFs) for expense or absence approval workflows. The page is accessed after scanning a QR code from the desktop application.
Parameters
:eorId-- the engagement ID the upload is associated with:approvalType-- eitherexpensesorabsences
Display
The page has a gradient background (white to light orange) and fills the viewport height. It shows:
- An information message explaining the upload context, interpolated with the approval type ("expense" or "absence") and the maximum number of files (4 for expenses, 1 for absences)
- A centered Upload File button (large size)
- A status area below the button showing upload progress or results
Initialization
On mount, the component:
- Retrieves the user ID from the
remundoIdentitystore - Sends a
NotifyUserLoginAfterQRScancommand vianotifyMobileLoginAfterQRScanto inform the desktop session that the mobile user has logged in
If the user ID cannot be found, an error notification is shown.
Upload flow
- User clicks the Upload File button, which opens a
DropZonemodal - Accepted file types: images (
image/*) and PDF (.pdf) - The
keepOriginalFileNameflag preserves the original file name from the device - On file selection:
- The file blob is converted to base64 via
blobToBase64 - HEIC files are automatically converted via
convertBase64IfHeicType - The file extension is updated to match the actual content type
- The file blob is converted to base64 via
- An
UpLoadMobilePhoneFileToBlobcommand is sent viauploadFileToBlobStoragewith:- File path:
{tenantId}/{userId}/{eorId}/{fileName} - Container:
mobile-phone-uploads - The engagement ID and approval type from the route parameters
- File path:
- During upload, a spinner with "uploading" text is shown
- On success, a success message is displayed with the file name
- On failure, an error message is displayed with the file name and the
fileUploadFailedflag is set (displayed in red via theerrorclass)
Behavior notes
- The approval type is formatted for display: "expenses" becomes "expense", other values become "absence"
- Multiple uploads are supported -- the user can click the upload button again after each upload completes
- Each upload is independent; there is no batch upload mechanism