Fix: Enable cancellation of attachment uploads in progress

[Copilot]

Problem

The attachment cancel buttons (X) were disabled during file upload, preventing users from cancelling ongoing uploads. This was caused by the disabled={selectedFile.uploading} attribute on the cancel buttons, which made them unclickable while files were being uploaded.

Solution

Implemented the AbortController API to enable upload cancellation at any time. Users can now click the cancel button while files are uploading to immediately stop the upload and remove the file from the UI.

Changes

1. Added AbortController Support

Added an abortController field to the SelectedFile interface to track ongoing uploads:

interface SelectedFile {
  file: File
  id: string
  metadata?: AttachmentMetadata
  uploading?: boolean
  uploadError?: string
  preview?: string
  fileType?: FileType
  abortController?: AbortController // For cancelling ongoing uploads
}

2. Enhanced Upload Function

Modified the uploadFiles function to:

• Create an AbortController for each file before starting the upload
• Store the controller in the file's state
• Pass the abort signal to the fetch request via signal: abortController?.signal
• Silently handle AbortError when uploads are cancelled (no error toast shown)
• Clean up the controller on success or failure

3. Updated Remove Function

Enhanced the removeFile function to:

• Check if the file is currently uploading
• Call abortController.abort() to cancel the ongoing fetch request
• Properly decrement the uploadingFilesCount when cancelling
• Remove the file from the UI and clean up resources

4. Enabled Cancel Buttons

Both cancel buttons (image preview overlay and list view) now:

• Have the disabled attribute removed
• Show contextual tooltips: "Cancel upload" during upload, "Remove file" otherwise
• Are clickable at all times

Technical Flow

When upload starts:

1. AbortController created for each file
2. Controller stored in file state
3. Upload begins with abort signal attached

When user clicks cancel:

1. removeFile() finds the file by ID
2. Calls abortController.abort() to cancel the request
3. Fetch throws AbortError (caught silently)
4. Upload counter decremented
5. File removed from UI

When upload completes normally:

1. Controller cleared from state
2. Metadata stored
3. UI updated as before

Benefits

• ✅ Better UX: Users can cancel uploads anytime
• ✅ Network efficiency: Stops data transfer immediately, saving bandwidth
• ✅ Clean state management: Upload counter and file list stay in sync
• ✅ No breaking changes: All existing upload/error flows work unchanged
• ✅ Browser compatible: AbortController supported in all modern browsers

Testing

To test the fix:

1. Select a large file (10MB+) as an attachment
2. Observe the upload spinner and enabled cancel button
3. Click the cancel button (X) during upload
4. Verify:
   • File is removed immediately
   • No error toast appears
   • Network tab shows request as "cancelled"
   • Upload counter updates correctly

Closes #[issue-number]

Original prompt

Attachement cancel button is not working when the upload is still in progress:

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

[coderabbitai]

Important

Review skipped

Bot user detected.

To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}