Patrick/medassist-ng
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: image upload optimization with sharp, thumbnails, and structured error codes (#304)

Browse Source 
- Add sharp for server-side image processing (WebP conversion + thumbnails)
- New shared backend utility for image upload, optimization, and cleanup
- Return structured error codes from upload endpoints (IMAGE_TOO_LARGE, INVALID_TYPE, etc.)
- Frontend error code mapping with i18n support (EN + DE)
- MedicationAvatar tries thumbnail first, falls back to full image
- Error display in MedicationsPage, MobileEditModal, and Auth avatar upload

Closes #302
This commit is contained in:
Daniel Volz
2026-02-24 23:52:59 +01:00
committed by GitHub
parent 7a32b2045e
commit 96b2a0c96f
15 changed files with 916 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/Auth.tsx
+26 -8
View File
@@ -3,6 +3,7 @@ import { createContext, type ReactNode, useCallback, useContext, useEffect, useR
import { useTranslation } from "react-i18next";
import { useEscapeKey } from "../hooks/useEscapeKey";
import { withCorrelation } from "../utils/correlation";
import { MAX_IMAGE_UPLOAD_BYTES, resolveImageUploadError } from "../utils/image-upload";
import { log } from "../utils/logger";
import { ConfirmModal } from "./ConfirmModal";
import { PasswordInput } from "./PasswordInput";
@@ -275,8 +276,16 @@ export function AuthProvider({ children }: { children: ReactNode }) {
});
if (!res.ok) {
const err = await res.json().catch(() => ({ error: "Upload failed" }));
throw new Error(err.error || "Upload failed");
let code = "UNKNOWN";
try {
const body = (await res.json()) as { code?: string };
if (typeof body?.code === "string" && body.code.trim().length > 0) {
code = body.code;
}
} catch {
// No JSON body
}
throw new Error(code);
}
await refreshUser();
@@ -613,6 +622,7 @@ export function UserProfile({ onClose }: { onClose?: () => void }) {
const [confirmPassword, setConfirmPassword] = useState("");
const [error, setError] = useState("");
const [success, setSuccess] = useState("");
const [avatarError, setAvatarError] = useState("");
const [loading, setLoading] = useState(false);
const [avatarLoading, setAvatarLoading] = useState(false);
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
@@ -624,14 +634,20 @@ export function UserProfile({ onClose }: { onClose?: () => void }) {
async function handleAvatarUpload(e: React.ChangeEvent<HTMLInputElement>) {
const file = e.target.files?.[0];
if (!file) return;
if (file.size > MAX_IMAGE_UPLOAD_BYTES) {
setAvatarError(t("form.imageUploadErrors.tooLarge"));
if (fileInputRef.current) fileInputRef.current.value = "";
return;
}
setAvatarLoading(true);
setError("");
setAvatarError("");
try {
await uploadAvatar(file);
setSuccess(t("auth.avatarUpdated", "Avatar updated"));
setAvatarError("");
} catch (err) {
setError(err instanceof Error ? err.message : "Upload failed");
const code = err instanceof Error ? err.message : "UNKNOWN";
setAvatarError(resolveImageUploadError(code, t));
} finally {
setAvatarLoading(false);
if (fileInputRef.current) fileInputRef.current.value = "";
@@ -640,12 +656,13 @@ export function UserProfile({ onClose }: { onClose?: () => void }) {
async function handleAvatarDelete() {
setAvatarLoading(true);
setError("");
setAvatarError("");
try {
await deleteAvatar();
setSuccess(t("auth.avatarRemoved", "Avatar removed"));
setAvatarError("");
} catch (err) {
setError(err instanceof Error ? err.message : "Delete failed");
const code = err instanceof Error ? err.message : "UNKNOWN";
setAvatarError(resolveImageUploadError(code, t));
} finally {
setAvatarLoading(false);
}
@@ -740,6 +757,7 @@ export function UserProfile({ onClose }: { onClose?: () => void }) {
</div>
</div>
<span className="profile-username">{user.username}</span>
{avatarError && <span className="field-error">{avatarError}</span>}
</div>
<form onSubmit={handleUpdate} className="profile-form">
frontend/src/components/MedicationAvatar.tsx
+28 -1
View File
@@ -2,6 +2,8 @@
// MedicationAvatar Component
// =============================================================================
import { useEffect, useState } from "react";
export type MedicationAvatarProps = {
name: string;
imageUrl?: string | null;
@@ -9,6 +11,12 @@ export type MedicationAvatarProps = {
};
export function MedicationAvatar({ name, imageUrl, size = "sm" }: MedicationAvatarProps) {
const [thumbFailed, setThumbFailed] = useState(false);
useEffect(() => {
setThumbFailed(false);
}, [imageUrl]);
const initials =
name
.split(" ")
@@ -19,7 +27,26 @@ export function MedicationAvatar({ name, imageUrl, size = "sm" }: MedicationAvat
const sizeClass = `med-avatar med-avatar-${size}`;
if (imageUrl) {
return <img src={`/api/images/${imageUrl}`} alt={name} className={sizeClass} />;
const normalizedImageUrl = imageUrl.toLowerCase();
const shouldUseThumbFirst = normalizedImageUrl.endsWith(".webp");
const extIndex = imageUrl.lastIndexOf(".");
const baseName = extIndex > 0 ? imageUrl.slice(0, extIndex) : imageUrl;
const thumbSrc = `/api/images/${baseName}-thumb.webp`;
const fullSrc = `/api/images/${imageUrl}`;
const resolvedSrc = shouldUseThumbFirst && !thumbFailed ? thumbSrc : fullSrc;
return (
<img
src={resolvedSrc}
alt={name}
className={sizeClass}
loading="lazy"
decoding="async"
onError={() => {
if (shouldUseThumbFirst && !thumbFailed) setThumbFailed(true);
}}
/>
);
}
return <div className={`${sizeClass} med-avatar-initials`}>{initials}</div>;
}
frontend/src/components/MobileEditModal.tsx
+8 -1
View File
@@ -59,6 +59,7 @@ export interface MobileEditModalProps {
meds: Medication[];
onUploadMedImage: (medId: number, file: File) => Promise<void>;
onDeleteMedImage: (medId: number) => Promise<void>;
imageUploadError: string | null;
// Actions
onClose: () => void;
onResetForm: () => void;
@@ -105,6 +106,7 @@ export function MobileEditModal({
meds,
onUploadMedImage,
onDeleteMedImage,
imageUploadError,
onClose,
_onResetForm,
onSaveMedication,
@@ -454,9 +456,14 @@ export function MobileEditModal({
<input
type="file"
accept="image/*"
onChange={(e) => e.target.files?.[0] && onUploadMedImage(editingId, e.target.files[0])}
onChange={(e) => {
const file = e.target.files?.[0];
e.target.value = "";
if (file) void onUploadMedImage(editingId, file);
}}
/>
)}
{imageUploadError && <span className="field-error">{imageUploadError}</span>}
</div>
)}
</div>
frontend/src/hooks/useMedications.ts
+25 -5
View File
@@ -50,13 +50,33 @@ export function useMedications(): UseMedicationsReturn {
body: formData,
credentials: "include",
});
if (res.ok) {
loadMeds();
if (!res.ok) {
let code = "UNKNOWN";
try {
const errorBody = (await res.json()) as { code?: string };
if (typeof errorBody?.code === "string" && errorBody.code.trim().length > 0) {
code = errorBody.code;
}
} catch {
// Keep fallback code when backend response has no JSON body.
}
throw new Error(code);
}
} catch {
// ignore
loadMeds();
} catch (error) {
if (error instanceof Error) {
// Network failures (fetch itself throws) produce browser-specific messages.
// Normalise to NETWORK_ERROR code so the UI can map to a translated string.
if (error.message === "Failed to fetch" || error.message.startsWith("NetworkError")) {
throw new Error("NETWORK_ERROR");
}
throw error;
}
throw new Error("UNKNOWN");
} finally {
setUploadingImage(false);
}
setUploadingImage(false);
},
[loadMeds]
);
frontend/src/i18n/de.json
+7
View File
@@ -183,6 +183,13 @@
"notes": "Notizen",
"medicationImage": "Medikamentenbild",
"removeImage": "Bild entfernen",
"imageUploadErrors": {
"tooLarge": "Das Bild ist zu groß. Die maximale Upload-Größe beträgt 10 MB.",
"invalidType": "Ungültiger Dateityp. Erlaubte Formate: JPEG, PNG, WebP, GIF.",
"invalidImage": "Ungültige oder nicht unterstützte Bilddatei.",
"noFile": "Es wurde keine Datei zum Hochladen ausgewählt.",
"generic": "Bild-Upload fehlgeschlagen. Bitte versuche es erneut."
},
"placeholders": {
"commercial": "z.B. Ozempic",
"generic": "z.B. Semaglutid (optional)",
frontend/src/i18n/en.json
+7
View File
@@ -183,6 +183,13 @@
"notes": "Notes",
"medicationImage": "Medication Image",
"removeImage": "Remove Image",
"imageUploadErrors": {
"tooLarge": "Image is too large. Maximum upload size is 10 MB.",
"invalidType": "Invalid file type. Allowed formats: JPEG, PNG, WebP, GIF.",
"invalidImage": "Invalid or unsupported image file.",
"noFile": "No file was selected for upload.",
"generic": "Image upload failed. Please try again."
},
"placeholders": {
"commercial": "e.g. Ozempic",
"generic": "e.g. Semaglutide (optional)",
frontend/src/pages/MedicationsPage.tsx
+104 -17
View File
@@ -20,6 +20,7 @@ import { useMedicationForm, useModalHistory, useUnsavedChangesWarning } from "..
import type { DoseUnit, Medication } from "../types";
import { DOSE_UNITS, FIELD_LIMITS, getPackageSize } from "../types";
import { combineDateAndTime, formatDate, formatDateTime, formatNumber } from "../utils/formatters";
import { MAX_IMAGE_UPLOAD_BYTES, resolveImageUploadError } from "../utils/image-upload";
import { log } from "../utils/logger";
function userStorageKey(userId: number | undefined, key: string): string {
@@ -51,6 +52,7 @@ export function MedicationsPage() {
setForm,
setOriginalForm,
editingId,
setEditingId,
formSaved,
setFormSaved,
formChanged,
@@ -138,6 +140,32 @@ export function MedicationsPage() {
const [showObsoleteConfirm, setShowObsoleteConfirm] = useState(false);
const [obsoleteCandidate, setObsoleteCandidate] = useState<Medication | null>(null);
const [allMeds, setAllMeds] = useState<Medication[]>(meds);
const [imageUploadError, setImageUploadError] = useState<string | null>(null);
const handlePendingMedicationImageSelection = useCallback(
(event: React.ChangeEvent<HTMLInputElement>) => {
const file = event.target.files?.[0];
event.target.value = "";
if (!file) return;
if (file.size > MAX_IMAGE_UPLOAD_BYTES) {
setImageUploadError(t("form.imageUploadErrors.tooLarge"));
setPendingImage(null);
setPendingImagePreview(null);
return;
}
setImageUploadError(null);
setPendingImage(file);
const reader = new FileReader();
reader.onload = (ev) => setPendingImagePreview(ev.target?.result as string);
reader.readAsDataURL(file);
},
[t]
);
useEffect(() => {
setImageUploadError(null);
}, [editingId]);
const [showObsolete, setShowObsolete] = useState(true);
const [readOnlyView, setReadOnlyView] = useState(false);
const [showReportModal, setShowReportModal] = useState(false);
@@ -173,6 +201,42 @@ export function MedicationsPage() {
void loadAllMeds();
}, [loadAllMeds]);
const tryUploadMedImage = useCallback(
async (medId: number, file: File) => {
setImageUploadError(null);
if (file.size > MAX_IMAGE_UPLOAD_BYTES) {
setImageUploadError(t("form.imageUploadErrors.tooLarge"));
return false;
}
try {
await uploadMedImage(medId, file);
void loadAllMeds();
setImageUploadError(null);
return true;
} catch (error) {
const code = error instanceof Error ? error.message : "UNKNOWN";
setImageUploadError(resolveImageUploadError(code, t));
return false;
}
},
[t, uploadMedImage, loadAllMeds]
);
const handleUploadMedImage = useCallback(
async (medId: number, file: File) => {
await tryUploadMedImage(medId, file);
},
[tryUploadMedImage]
);
const handleDeleteMedImage = useCallback(
async (medId: number) => {
await deleteMedImage(medId);
void loadAllMeds();
},
[deleteMedImage, loadAllMeds]
);
// Calculate total tablets
const totalTablets = useMemo(() => {
if (form.packageType === "bottle") {
@@ -467,7 +531,19 @@ export function MedicationsPage() {
// Upload image if pending (for new medications)
if (!editingId && pendingImage && saved.id) {
await uploadMedImage(saved.id, pendingImage);
const uploaded = await tryUploadMedImage(saved.id, pendingImage);
if (!uploaded) {
// Keep user in edit mode so upload error stays visible and retry is immediate.
setEditingId(saved.id);
setFormSaved(true);
setOriginalForm(form);
setPendingImage(null);
setPendingImagePreview(null);
loadMeds();
void loadAllMeds();
setSaving(false);
return;
}
setPendingImage(null);
setPendingImagePreview(null);
}
@@ -608,6 +684,13 @@ export function MedicationsPage() {
return () => document.removeEventListener("keydown", handleEscape);
}, [showEditModal, closeEditModal]);
function scrollToTopForDesktopEdit() {
if (window.innerWidth <= 768) return;
window.requestAnimationFrame(() => {
window.scrollTo({ top: 0, behavior: "smooth" });
});
}
function handleEditClick(med: Medication) {
if (formChanged) {
pendingActionRef.current = () => {
@@ -615,6 +698,7 @@ export function MedicationsPage() {
setReadOnlyView(false);
startEdit(med, openEditModal);
setViewMode("form");
scrollToTopForDesktopEdit();
};
setUnsavedConfirmSource(showEditModal ? "mobile-edit" : "desktop-form");
setShowUnsavedConfirm(true);
@@ -625,6 +709,7 @@ export function MedicationsPage() {
setActiveTab("general");
startEdit(med, openEditModal);
setViewMode("form");
scrollToTopForDesktopEdit();
}
function handleViewClick(med: Medication) {
@@ -847,8 +932,10 @@ export function MedicationsPage() {
{s.usage} {s.usage === 1 ? t("common.pill") : t("common.pills")} ·{" "}
{s.every === 1 ? t("common.daily") : t("common.everyNDays", { count: s.every })} ·{" "}
{t("form.blisters.from")} {formatDateTime(s.start)}
{"takenBy" in s && s.takenBy && <span className="blister-taken-by"> · {s.takenBy}</span>}
{"intakeRemindersEnabled" in s && s.intakeRemindersEnabled && (
{"takenBy" in s && (s as import("../types").Intake).takenBy && (
<span className="blister-taken-by"> · {(s as import("../types").Intake).takenBy}</span>
)}
{"intakeRemindersEnabled" in s && (s as import("../types").Intake).intakeRemindersEnabled && (
<span className="blister-reminder-icon" title={t("form.blisters.remindTooltip")}>
{" "}
<Bell size={12} aria-hidden="true" />
@@ -1050,7 +1137,9 @@ export function MedicationsPage() {
<select
className="package-type-select"
value={form.packageType}
onChange={(e) => handleValueChange("packageType", e.target.value)}
onChange={(e) =>
handleValueChange("packageType", e.target.value as import("../types").PackageType)
}
>
<option value="blister">{t("form.packageTypeBlister")}</option>
<option value="bottle">{t("form.packageTypeBottle")}</option>
@@ -1112,7 +1201,7 @@ export function MedicationsPage() {
<button
type="button"
className="danger icon-only tooltip-trigger"
onClick={() => deleteMedImage(editingId)}
onClick={() => handleDeleteMedImage(editingId)}
aria-label={t("form.removeImage")}
data-tooltip={t("form.removeImage")}
>
@@ -1125,7 +1214,11 @@ export function MedicationsPage() {
<input
type="file"
accept="image/jpeg,image/png,image/webp,image/gif"
onChange={(e) => e.target.files?.[0] && uploadMedImage(editingId, e.target.files[0])}
onChange={(e) => {
const file = e.target.files?.[0];
e.target.value = "";
if (file) void tryUploadMedImage(editingId, file);
}}
disabled={uploadingImage}
/>
);
@@ -1153,18 +1246,11 @@ export function MedicationsPage() {
<input
type="file"
accept="image/jpeg,image/png,image/webp,image/gif"
onChange={(e) => {
const file = e.target.files?.[0];
if (file) {
setPendingImage(file);
const reader = new FileReader();
reader.onload = (ev) => setPendingImagePreview(ev.target?.result as string);
reader.readAsDataURL(file);
}
}}
onChange={handlePendingMedicationImageSelection}
/>
);
})()}
{imageUploadError && <span className="field-error">{imageUploadError}</span>}
</div>
</div>
{/* end general tab */}
@@ -1507,8 +1593,9 @@ export function MedicationsPage() {
onRemoveIntake={removeIntake}
onHandleValueChange={handleValueChange}
meds={allMeds}
onUploadMedImage={uploadMedImage}
onDeleteMedImage={deleteMedImage}
onUploadMedImage={handleUploadMedImage}
onDeleteMedImage={handleDeleteMedImage}
imageUploadError={imageUploadError}
onClose={() => {
closeEditModal();
}}
frontend/src/test/components/Auth.test.tsx
+1 -1
View File
@@ -896,7 +896,7 @@ describe("AuthProvider methods", () => {
});
const file = new File(["avatar"], "avatar.png", { type: "image/png" });
await expect(result.current.uploadAvatar(file)).rejects.toThrow("Upload failed");
await expect(result.current.uploadAvatar(file)).rejects.toThrow("UNKNOWN");
});
it("deleteAvatar succeeds and refreshes user", async () => {
frontend/src/test/hooks/useMedications.test.ts
+5 -3
View File
@@ -170,9 +170,11 @@ describe("useMedications", () => {
const { result } = renderHook(() => useMedications());
const file = new File(["test"], "test.jpg", { type: "image/jpeg" });
await act(async () => {
await result.current.uploadMedImage(1, file);
});
await expect(
act(async () => {
await result.current.uploadMedImage(1, file);
})
).rejects.toThrow("Upload failed");
expect(result.current.uploadingImage).toBe(false);
});
frontend/src/utils/image-upload.ts
+30
View File
@@ -0,0 +1,30 @@
import type { TFunction } from "i18next";
export const MAX_IMAGE_UPLOAD_BYTES = 10 * 1024 * 1024;
/** Error codes returned by the backend image upload endpoints. */
const IMAGE_ERROR_CODE_MAP: Record<string, string> = {
IMAGE_TOO_LARGE: "form.imageUploadErrors.tooLarge",
INVALID_TYPE: "form.imageUploadErrors.invalidType",
INVALID_IMAGE: "form.imageUploadErrors.invalidImage",
NO_FILE: "form.imageUploadErrors.noFile",
NETWORK_ERROR: "common.networkError",
};
/**
* Maps a backend image-upload error code to a translated user-facing message.
* Falls back to a generic error when the code is unknown.
*/
export function resolveImageUploadError(code: string, t: TFunction): string {
const normalized = normalizeErrorCode(code);
const key = IMAGE_ERROR_CODE_MAP[normalized];
return key ? t(key) : t("form.imageUploadErrors.generic");
}
/** Browser network errors are not error codes — normalise them. */
function normalizeErrorCode(code: string): string {
if (code === "Failed to fetch" || code.startsWith("NetworkError")) {
return "NETWORK_ERROR";
}
return code;
}