Clearer Photo Upload Feedback in the Check-Out Builder

Released in v0.1.128

Overview

The photo upload experience in the check-out report builder has been improved to give agents and landlords immediate, clear feedback about what file types and sizes are accepted — before they attempt an upload.

This change directly addresses a common pain point on mobile devices, where agents uploading HEIC photos from iPhones would receive no upfront guidance and only see an error after the upload had already failed.

What's New

Format & Size Caption

A caption now appears directly below the photo upload button:

JPG, PNG, WebP, HEIC · Max 5 MB

This is always visible, requiring no interaction to discover. Users no longer need to attempt an upload to find out what formats are supported.

Client-Side File Size Validation

File size is now checked in the browser before any network request is made. If the selected file exceeds 5 MB, an inline error appears immediately beneath the upload control — no presign request is sent, and no toast notification fires.

This means:

Faster feedback (no waiting for a server round-trip)
The error appears in context, next to the upload button
The user can select a different file right away

Specific Toast Error Messages

For failures that do reach the server, toast error messages are now specific and actionable. For example:

File too large (8.2 MB) — maximum is 5 MB

Previously, a generic error string was shown with no detail about the file or the limit.

Upload Progress Indicator

The camera icon button now reflects upload progress during an active upload. Previously, the uploading state swapped the camera icon for a spinner but gave no indication of how far along the upload was. A progress percentage is now shown, giving users confidence the upload is proceeding.

Accepted File Formats

Format	MIME Type	Notes
JPEG	`image/jpeg`	Universally supported
PNG	`image/png`	Universally supported
WebP	`image/webp`	Modern browsers and apps
HEIC	`image/heic`	iPhone default format — requires compatible S3 bucket configuration

Note for HEIC/iPhone photos: HEIC upload support depends on how the S3 bucket is configured, not just the file input's accept attribute. If HEIC uploads are failing in your environment, check your storage bucket settings.

Error Handling Summary

Scenario	Where the error appears	Message style
File exceeds 5 MB (caught client-side)	Inline, below upload button	Descriptive with actual file size
Upload fails server-side	Toast notification	Specific, e.g. "File too large (8.2 MB) — maximum is 5 MB"
Unsupported format	Blocked by file input `accept` attribute	Browser-native (before selection)

Component Reference

Component: PhotoStrip
Location: src/app/dashboard/check-out/[reportId]/report-builder.tsx