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:
@@ -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);
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user