fix: avoid full re-render on image upload in setup wizard

Calling setState() after FileReader.onload triggered a full popup
re-render which could crash or close the popup with large images.
Update DOM elements in place instead, and add error handling.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
adlee-was-taken
2026-04-12 11:44:32 -04:00
parent 336e90fc84
commit 0551efe69e

View File

@@ -156,11 +156,26 @@ function attachStep1Listeners(): void {
const reader = new FileReader(); const reader = new FileReader();
reader.onload = () => { reader.onload = () => {
const result = reader.result as string; try {
// Remove the data:image/jpeg;base64, prefix. const result = reader.result as string;
const base64 = result.split(',')[1] ?? result; // Remove the data:image/jpeg;base64, prefix.
wizardImageBase64 = base64; const base64 = result.split(',')[1] ?? result;
setState({ error: null }); // Re-render to show "image loaded". wizardImageBase64 = base64;
// Update UI without a full re-render to avoid resetting file input state.
const dropEl = document.getElementById('file-drop');
if (dropEl) {
dropEl.classList.add('has-file');
const p = dropEl.querySelector('p');
if (p) p.textContent = `image loaded (${(file.size / 1024).toFixed(0)} KB)`;
}
const nextBtn = document.getElementById('next-btn') as HTMLButtonElement;
if (nextBtn) nextBtn.disabled = false;
} catch (err) {
setState({ error: `Failed to read image: ${err}` });
}
};
reader.onerror = () => {
setState({ error: 'Failed to read image file' });
}; };
reader.readAsDataURL(file); reader.readAsDataURL(file);
}); });