Repository navigation
Add retry mechanism for failed image uploads in UI #59
Description
Problem
When an image upload fails, users must refresh and start over. There's no retry mechanism in the UI for failed uploads.
Current Behavior
- User selects/drags images
- Upload fails (network, server error, etc.)
- Error message shown
- User must refresh page and start over
- All progress is lost
User Impact
- Frustrating experience on flaky connections
- Loss of form data if page is refreshed
- No way to retry individual failed images
- Must re-select all images
Proposed Solution
Add retry functionality to the upload UI:
// In imageUpload.pug script section
async function uploadFiles(files, retryCount = 0) {
const MAX_RETRIES = 3;
try {
const response = await fetch('/api/upload/image', {
method: 'POST',
body: formData
});
if (\!response.ok && retryCount < MAX_RETRIES) {
// Exponential backoff
const delay = Math.pow(2, retryCount) * 1000;
await new Promise(resolve => setTimeout(resolve, delay));
// Retry
return uploadFiles(files, retryCount + 1);
}
// ... handle success
} catch (error) {
if (retryCount < MAX_RETRIES) {
// Show retry UI
showRetryOption(files, retryCount);
} else {
showFinalError(error);
}
}
}
function showRetryOption(files, attemptNumber) {
const retryButton = document.createElement('button');
retryButton.textContent = `Retry Upload (Attempt ${attemptNumber + 1}/3)`;
retryButton.onclick = () => uploadFiles(files, attemptNumber);
document.getElementById('upload-errors').appendChild(retryButton);
}UI Components Needed
- Retry button for failed uploads
- Progress indicator showing retry attempt
- Individual file retry (not just batch)
- Smart retry (only retry failed files)
Advanced Features
- Store failed uploads in localStorage
- Auto-retry on network recovery
- Resume partial uploads
- Show which files succeeded vs failed
Success Criteria
- Users can retry failed uploads without losing data
- Exponential backoff prevents server overload
- Clear feedback on retry attempts
- Graceful degradation after max retries
Testing
- Simulate network failures
- Test with flaky connection
- Verify exponential backoff
- Test max retry limit
Priority: Medium - Improves user experience significantly
Effort: Medium - Requires UI and JavaScript changes
Labels: enhancement, ui/ux
Activity
jra3 commentedon Oct 7, 2025
Consolidated into master issue #115. See #115 for comprehensive tracking of all image upload enhancements.