refactor: server-side QR extraction for institution submissions (#560)

Author: faizkhairi

app/(admin)/admin/institutions/_lib/upload-qr-replacement.ts

@@ -1,18 +1,12 @@
 "use server";
 
-import {
-	BinaryBitmap,
-	HybridBinarizer,
-	QRCodeReader,
-	RGBLuminanceSource,
-} from "@zxing/library";
 import { eq } from "drizzle-orm";
 import { revalidatePath } from "next/cache";
-import sharp from "sharp";
 import { db } from "@/db";
 import { institutions } from "@/db/institutions";
 import { requireAdminSession } from "@/lib/auth-helpers";
 import { r2Storage } from "@/lib/integrations/r2-client";
+import { decodeQrFromBuffer } from "@/lib/qr-decode";
 
 export type UploadQrReplacementResult = {
 	success: boolean;
@@ -45,41 +39,8 @@ export async function uploadQrReplacement(
 		// Upload to R2 storage
 		const qrImageUrl = await r2Storage.uploadFile(buffer, qrImageFile.name);
 
-		// Attempt QR code extraction
-		let qrContent: string | undefined;
-		try {
-			const { data, info } = await sharp(buffer)
-				.ensureAlpha()
-				.raw()
-				.toBuffer({ resolveWithObject: true });
-
-			// Convert RGBA to RGB for @zxing/library
-			const rgbData = new Uint8ClampedArray(info.width * info.height * 3);
-			for (let i = 0, j = 0; i < data.length; i += 4, j += 3) {
-				rgbData[j] = data[i]; // R
-				rgbData[j + 1] = data[i + 1]; // G
-				rgbData[j + 2] = data[i + 2]; // B
-				// Skip alpha channel
-			}
-
-			const luminanceSource = new RGBLuminanceSource(
-				rgbData,
-				info.width,
-				info.height,
-			);
-			const binaryBitmap = new BinaryBitmap(
-				new HybridBinarizer(luminanceSource),
-			);
-			const reader = new QRCodeReader();
-
-			const result = reader.decode(binaryBitmap);
-			if (result) {
-				qrContent = result.getText();
-			}
-		} catch (err) {
-			console.error("QR decode failed:", err);
-			// Don't fail the upload if QR extraction fails
-		}
+		// Attempt QR code extraction using shared server-side utility
+		const qrContent = (await decodeQrFromBuffer(buffer)) ?? undefined;
 
 		return {
 			success: true,

app/(user)/contribute/_lib/submit-institution.ts

@@ -17,6 +17,7 @@ import {
 	logInstitutionSubmissionFailure,
 	logNewInstitution,
 } from "@/lib/integrations/telegram";
+import { decodeQrFromBuffer } from "@/lib/qr-decode";
 import { isToyyibpay } from "@/lib/qr-utils";
 import { getUserById } from "@/lib/queries/users";
 import { slugify } from "@/lib/utils";
@@ -179,31 +180,6 @@ export async function submitInstitution(
 		};
 	}
 
-	// --- Duplicate QR content check
-	const qrContentRaw = rawFromForm.qrContent;
-	if (
-		qrContentRaw &&
-		typeof qrContentRaw === "string" &&
-		qrContentRaw.trim() !== ""
-	) {
-		const [existingQr] = await db
-			.select({ id: institutions.id })
-			.from(institutions)
-			.where(eq(institutions.qrContent, qrContentRaw.trim()))
-			.limit(1);
-
-		if (existingQr) {
-			return {
-				status: "error",
-				errors: {
-					general: [
-						"QR code ini telah pun wujud dalam sistem. Sila semak semula.",
-					],
-				},
-			};
-		}
-	}
-
 	const socialMedia = {
 		facebook: formData.get("facebook") || undefined,
 		instagram: formData.get("instagram") || undefined,
@@ -261,10 +237,10 @@ export async function submitInstitution(
 
 	console.log("Validation passed, proceeding with submission");
 
-	// --- Handle QR image (optional)
+	// --- Handle QR image upload + server-side QR extraction
 	let qrImageUrl: string | undefined;
-	// We get qrContent from the form data now, no more backend processing
-	const qrContent = formData.get("qrContent") as string | null;
+	let qrContent: string | null = null;
+	let qrBuffer: Buffer | undefined;
 
 	try {
 		if (qrImageFile && qrImageFile.size > 0) {
@@ -290,65 +266,21 @@ export async function submitInstitution(
 			}
 
 			const arrayBuffer = await qrImageFile.arrayBuffer();
-			const buffer = Buffer.from(arrayBuffer);
+			qrBuffer = Buffer.from(arrayBuffer);
 
-			// Upload to R2
-			try {
-				qrImageUrl = await r2Storage.uploadFile(buffer, qrImageFile.name);
-			} catch (uploadError) {
-				console.error("Failed to upload QR image to R2:", uploadError);
-
-				// Log to Telegram with error details
-				try {
-					await logInstitutionSubmissionFailure({
-						error:
-							uploadError instanceof Error
-								? uploadError.message
-								: String(uploadError),
-						institutionName: parsed.data.name,
-						category: parsed.data.category,
-						state: parsed.data.state,
-						city: parsed.data.city,
-						contributorName: user?.name || undefined,
-						contributorEmail: user?.email,
-						errorType: "R2 image upload failure",
-					});
-				} catch (telegramError) {
-					console.error(
-						"Failed to log upload failure to Telegram:",
-						telegramError,
-					);
-				}
+			// Server-side QR extraction (more reliable than browser-side canvas decode)
+			qrContent = await decodeQrFromBuffer(qrBuffer);
 
-				return {
-					status: "error",
-					errors: {
-						qrImage: ["Gagal memuat naik imej QR. Sila cuba lagi."],
-					},
-				};
+			// Fall back to client-provided value if server extraction fails
+			if (!qrContent) {
+				const clientQrContent = formData.get("qrContent") as string | null;
+				if (clientQrContent?.trim()) {
+					qrContent = clientQrContent.trim();
+				}
 			}
 		}
 	} catch (error) {
-		console.error("Error handling QR image upload:", error);
-
-		// Log to Telegram with error details
-		try {
-			await logInstitutionSubmissionFailure({
-				error: error instanceof Error ? error.message : String(error),
-				institutionName: parsed?.data?.name,
-				category: parsed?.data?.category,
-				state: parsed?.data?.state,
-				city: parsed?.data?.city,
-				contributorName: user?.name || undefined,
-				contributorEmail: user?.email,
-				errorType: "QR image processing failure",
-			});
-		} catch (telegramError) {
-			console.error(
-				"Failed to log QR processing failure to Telegram:",
-				telegramError,
-			);
-		}
+		console.error("Error handling QR image processing:", error);
 
 		return {
 			status: "error",
@@ -358,6 +290,64 @@ export async function submitInstitution(
 		};
 	}
 
+	// --- Duplicate QR check (before R2 upload to avoid orphaned objects)
+	if (qrContent) {
+		const [existingQr] = await db
+			.select({ id: institutions.id })
+			.from(institutions)
+			.where(eq(institutions.qrContent, qrContent))
+			.limit(1);
+
+		if (existingQr) {
+			return {
+				status: "error",
+				errors: {
+					general: [
+						"QR code ini telah pun wujud dalam sistem. Sila semak semula.",
+					],
+				},
+			};
+		}
+	}
+
+	// --- Upload to R2 (only after duplicate check passes)
+	if (qrBuffer && qrImageFile) {
+		try {
+			qrImageUrl = await r2Storage.uploadFile(qrBuffer, qrImageFile.name);
+		} catch (uploadError) {
+			console.error("Failed to upload QR image to R2:", uploadError);
+
+			// Log to Telegram with error details
+			try {
+				await logInstitutionSubmissionFailure({
+					error:
+						uploadError instanceof Error
+							? uploadError.message
+							: String(uploadError),
+					institutionName: parsed.data.name,
+					category: parsed.data.category,
+					state: parsed.data.state,
+					city: parsed.data.city,
+					contributorName: user?.name || undefined,
+					contributorEmail: user?.email,
+					errorType: "R2 image upload failure",
+				});
+			} catch (telegramError) {
+				console.error(
+					"Failed to log upload failure to Telegram:",
+					telegramError,
+				);
+			}
+
+			return {
+				status: "error",
+				errors: {
+					qrImage: ["Gagal memuat naik imej QR. Sila cuba lagi."],
+				},
+			};
+		}
+	}
+
 	// Geocode if coords not provided
 	if (!coords) {
 		const geocoded = await geocodeInstitutionWithFallback(
@@ -398,6 +388,7 @@ export async function submitInstitution(
 				state: parsed.data.state as (typeof states)[number],
 				coords: coords, // Coords may be updated by geocoding
 				qrImage: qrImageUrl,
+				qrContent: qrContent || null,
 				contributorId: contributorId, // Include the contributor ID
 				status: "pending", // Always pending for new submissions
 				supportedPayment: [isToyyibpay(qrContent) ? "toyyibpay" : "duitnow"],

lib/qr-decode.ts

@@ -0,0 +1,55 @@
+import {
+	BinaryBitmap,
+	HybridBinarizer,
+	QRCodeReader,
+	RGBLuminanceSource,
+} from "@zxing/library";
+import sharp from "sharp";
+
+/**
+ * Decode QR code content from an image buffer using sharp + @zxing/library.
+ *
+ * Converts the image to sRGB colorspace first (handles grayscale inputs that
+ * would otherwise produce 2-channel GA data), then adds alpha to guarantee
+ * 4-channel RGBA output. Strips alpha to produce RGB data compatible with
+ * @zxing/library's RGBLuminanceSource.
+ *
+ * @returns The decoded QR text, or null if decoding fails.
+ */
+export const decodeQrFromBuffer = async (
+	buffer: Buffer,
+): Promise<string | null> => {
+	try {
+		const { data, info } = await sharp(buffer)
+			.toColorspace("srgb")
+			.ensureAlpha()
+			.raw()
+			.toBuffer({ resolveWithObject: true });
+
+		if (info.channels !== 4) {
+			return null;
+		}
+
+		// Convert RGBA to RGB for @zxing/library
+		const rgbData = new Uint8ClampedArray(info.width * info.height * 3);
+		for (let i = 0, j = 0; i < data.length; i += 4, j += 3) {
+			rgbData[j] = data[i]; // R
+			rgbData[j + 1] = data[i + 1]; // G
+			rgbData[j + 2] = data[i + 2]; // B
+		}
+
+		const luminanceSource = new RGBLuminanceSource(
+			rgbData,
+			info.width,
+			info.height,
+		);
+		const binaryBitmap = new BinaryBitmap(new HybridBinarizer(luminanceSource));
+		const reader = new QRCodeReader();
+		const result = reader.decode(binaryBitmap);
+
+		return result?.getText() ?? null;
+	} catch (err) {
+		console.warn("QR decode failed:", err);
+		return null;
+	}
+};