- ![]()
-
+
+
+
+ ![]()
+
+
+
+
+ Photo ID Quality Check
+ +
+
+ ⚠ Image quality issue detected
+ +
+
+ ✔ Image looks good — clear and properly sized for submission.
+
+
+
+
@@ -433,23 +451,10 @@
// Upload button — opens file picker
idBtn?.addEventListener("click", function() { if (idInput) idInput.click(); });
- // Scanner/camera button — uses capture attribute to trigger camera or scanner
+ // Scanner/camera button
var idScanBtn = document.getElementById("dot-id-scan-btn");
var idScanInput = document.getElementById("dot-photo-id-scan");
idScanBtn?.addEventListener("click", function() { if (idScanInput) idScanInput.click(); });
- idScanInput?.addEventListener("change", function() {
- var file = idScanInput.files?.[0];
- if (!file) return;
- // Copy to main input handler
- window.__dotPhotoId = file;
- if (file.type.startsWith("image/") && idImg) {
- var reader = new FileReader();
- reader.onload = function(e) { idImg.src = e.target?.result; };
- reader.readAsDataURL(file);
- }
- if (idPreview) idPreview.hidden = false;
- if (idUploadOpts) idUploadOpts.style.display = "none";
- });
// QR code button — show QR with current page URL for phone upload
idQrBtn?.addEventListener("click", function() {
@@ -476,24 +481,140 @@
}
});
- idInput?.addEventListener("change", function() {
- var file = idInput.files?.[0];
+ var idAcceptBtn = document.getElementById("dot-id-accept");
+ var idRetakeBtn = document.getElementById("dot-id-retake");
+ var idQualityWarn = document.getElementById("dot-id-quality-warn");
+ var idQualityOk = document.getElementById("dot-id-quality-ok");
+ var idQualityMsg = document.getElementById("dot-id-quality-msg");
+ var idChecksDiv = document.getElementById("dot-id-checks");
+ var idResolution = document.getElementById("dot-id-resolution");
+ var idAccepted = false;
+
+ function runQualityCheck(file, imgEl) {
+ var checks = [];
+ var warnings = [];
+
+ // File size check
+ var sizeMB = (file.size / 1024 / 1024).toFixed(1);
+ if (file.size < 50000) {
+ checks.push({ok: false, text: "File size: " + sizeMB + "MB — too small, may be low quality"});
+ warnings.push("Image file is very small (" + sizeMB + "MB). Please use a higher resolution.");
+ } else if (file.size > 15000000) {
+ checks.push({ok: false, text: "File size: " + sizeMB + "MB — very large"});
+ warnings.push("File is over 15MB. Consider a smaller image.");
+ } else {
+ checks.push({ok: true, text: "File size: " + sizeMB + "MB"});
+ }
+
+ // File type check
+ var validTypes = ["image/jpeg","image/png","image/heic","image/heif","image/webp","application/pdf"];
+ if (validTypes.indexOf(file.type) >= 0 || file.type.startsWith("image/")) {
+ checks.push({ok: true, text: "File type: " + file.type.split("/")[1].toUpperCase()});
+ } else {
+ checks.push({ok: false, text: "File type: " + file.type + " — not a recognized image format"});
+ warnings.push("Please upload a JPEG, PNG, or PDF image of your ID.");
+ }
+
+ // Resolution check (for images)
+ if (imgEl && imgEl.naturalWidth) {
+ var w = imgEl.naturalWidth;
+ var h = imgEl.naturalHeight;
+ if (idResolution) idResolution.textContent = w + " × " + h + " pixels";
+ if (w < 400 || h < 250) {
+ checks.push({ok: false, text: "Resolution: " + w + "×" + h + " — too low, text may be unreadable"});
+ warnings.push("Image resolution is too low. FMCSA may not accept an unreadable ID.");
+ } else if (w < 800 || h < 500) {
+ checks.push({ok: true, text: "Resolution: " + w + "×" + h + " — acceptable"});
+ } else {
+ checks.push({ok: true, text: "Resolution: " + w + "×" + h + " — good"});
+ }
+
+ // Aspect ratio check (ID cards are roughly 1.6:1)
+ var ratio = Math.max(w,h) / Math.min(w,h);
+ if (ratio > 0.8 && ratio < 2.5) {
+ checks.push({ok: true, text: "Aspect ratio: looks like an ID card"});
+ } else {
+ checks.push({ok: false, text: "Aspect ratio: " + ratio.toFixed(1) + ":1 — doesn't look like a standard ID"});
+ warnings.push("This doesn't appear to be a photo of an ID card. Please upload a clear photo of the front of your government-issued ID.");
+ }
+ }
+
+ // Render checks
+ if (idChecksDiv) {
+ idChecksDiv.innerHTML = checks.map(function(c) {
+ return '
' +
+ (c.ok ? '✔' : '✘') +
+ '' + c.text + '
';
+ }).join("");
+ }
+
+ if (warnings.length > 0) {
+ if (idQualityWarn) { idQualityWarn.hidden = false; idQualityMsg.textContent = warnings.join(" "); }
+ if (idQualityOk) idQualityOk.hidden = true;
+ } else {
+ if (idQualityWarn) idQualityWarn.hidden = true;
+ if (idQualityOk) idQualityOk.hidden = false;
+ }
+ }
+
+ function handleIdFile(file) {
if (!file) return;
window.__dotPhotoId = file;
- if (file.type.startsWith("image/")) {
- const reader = new FileReader();
- reader.onload = (e) => { idImg.src = e.target?.result; };
+ idAccepted = false;
+ if (file.type.startsWith("image/") && idImg) {
+ var reader = new FileReader();
+ reader.onload = function(e) {
+ idImg.src = e.target?.result;
+ // Wait for image to load to check dimensions
+ idImg.onload = function() { runQualityCheck(file, idImg); };
+ };
reader.readAsDataURL(file);
+ } else {
+ // PDF or other — can't preview but accept
+ if (idResolution) idResolution.textContent = "PDF document";
+ runQualityCheck(file, null);
}
if (idPreview) idPreview.hidden = false;
if (idUploadOpts) idUploadOpts.style.display = "none";
+ }
+
+ // Accept button
+ idAcceptBtn?.addEventListener("click", function() {
+ idAccepted = true;
+ if (idPreview) {
+ // Collapse to small preview
+ var qualCheck = document.getElementById("dot-id-quality-check");
+ if (qualCheck) qualCheck.hidden = true;
+ idAcceptBtn.hidden = true;
+ idRetakeBtn.style.fontSize = "11px";
+ idRetakeBtn.textContent = "Change ID";
+ if (idImg) { idImg.style.maxWidth = "150px"; idImg.style.maxHeight = "100px"; }
+ }
});
- idRemove?.addEventListener("click", () => {
- (window).__dotPhotoId = null;
+
+ // Retake button
+ idRetakeBtn?.addEventListener("click", function() {
+ window.__dotPhotoId = null;
+ idAccepted = false;
if (idInput) idInput.value = "";
if (idScanInput) idScanInput.value = "";
if (idPreview) idPreview.hidden = true;
if (idUploadOpts) idUploadOpts.style.display = "";
+ // Reset quality check UI
+ var qualCheck = document.getElementById("dot-id-quality-check");
+ if (qualCheck) qualCheck.hidden = false;
+ if (idAcceptBtn) idAcceptBtn.hidden = false;
+ if (idRetakeBtn) { idRetakeBtn.style.fontSize = "13px"; idRetakeBtn.textContent = "Retake / Re-upload"; }
+ if (idImg) { idImg.style.maxWidth = "320px"; idImg.style.maxHeight = "240px"; }
+ });
+
+ idInput?.addEventListener("change", function() {
+ handleIdFile(idInput.files?.[0]);
+ });
+
+ // Scanner input handler
+ idScanInput?.addEventListener("change", function() {
+ handleIdFile(idScanInput.files?.[0]);
});
} // end guard