feat: Add abort signal support for file uploads and S3 storage operations

Author: adamrefaey

frontend/src/common/api/reportService.ts

@@ -14,15 +14,16 @@ export interface UploadProgressCallback {
 /**
  * Creates an authenticated request config with bearer token
  */
-export const getAuthConfig = async (): Promise<{ headers: { Accept: string, 'Content-Type': string, Authorization: string }, onUploadProgress?: (progressEvent: AxiosProgressEvent) => void }> => {
+export const getAuthConfig = async (signal?: AbortSignal): Promise<{ headers: { Accept: string, 'Content-Type': string, Authorization: string }, signal?: AbortSignal, onUploadProgress?: (progressEvent: AxiosProgressEvent) => void }> => {
   const session = await fetchAuthSession();
   const idToken = session.tokens?.idToken?.toString() || '';
   return {
       headers: {
         Accept: 'application/json',
         'Content-Type': 'application/json',
         Authorization: idToken ? `Bearer ${idToken}` : ''
-    }
+      },
+      signal
   };
 };
 
@@ -40,11 +41,13 @@ export class ReportError extends Error {
  * Uploads a medical report file
  * @param file - The file to upload
  * @param onProgress - Optional callback for tracking upload progress
+ * @param signal - Optional abort signal for canceling the request
  * @returns Promise with the created medical report
  */
 export const uploadReport = async (
   file: File,
-  onProgress?: UploadProgressCallback
+  onProgress?: UploadProgressCallback,
+  signal?: AbortSignal
 ): Promise<MedicalReport> => {
   try {
     // Import s3StorageService dynamically to avoid circular dependency
@@ -54,11 +57,12 @@ export const uploadReport = async (
     const s3Key = await s3StorageService.uploadFile(
       file,
       'reports',
-      onProgress as (progress: number) => void
+      onProgress as (progress: number) => void,
+      signal
     );
 
     // Then create the report record with the S3 key
-    const config = await getAuthConfig();
+    const config = await getAuthConfig(signal);
 
     // Send the report metadata to the API
     const response = await axios.post(
@@ -71,6 +75,11 @@ export const uploadReport = async (
 
     return response.data;
   } catch (error) {
+    // If the request was aborted, propagate the abort error
+    if (signal?.aborted) {
+      throw new DOMException('The operation was aborted', 'AbortError');
+    }
+    
     if (axios.isAxiosError(error)) {
       console.error('API Error Details:', error.response?.data, error.response?.headers);
       throw new ReportError(`Failed to upload report: ${error.message}`);

frontend/src/common/components/Upload/UploadModal.scss

@@ -281,8 +281,16 @@
     width: 100%;
     max-width: 15rem;
     --color: white;
-    --border-color: white;
-    --background: transparent;
+    --border-color: rgba(255, 255, 255, 0.6);
+    --background: rgba(255, 255, 255, 0.1);
+    --border-radius: 0.5rem;
+    --border-width: 1px;
+    --border-style: solid;
+    
+    ion-icon {
+      margin-right: 0.5rem;
+      font-size: 1.25rem;
+    }
   }
 
   &__file-item {
@@ -338,4 +346,4 @@
     --background: rgba(0, 0, 0, 0.1);
     --progress-background: var(--ion-color-primary);
   }
-} 
+}

frontend/src/common/components/Upload/UploadModal.tsx

@@ -8,7 +8,7 @@ import {
   IonLabel,
   IonItem
 } from '@ionic/react';
-import { closeOutline, cloudUploadOutline, documentOutline, checkmarkOutline } from 'ionicons/icons';
+import { closeOutline, cloudUploadOutline, documentOutline, checkmarkOutline, closeCircleOutline } from 'ionicons/icons';
 import { useTranslation } from 'react-i18next';
 import { UploadStatus, useFileUpload } from '../../hooks/useFileUpload';
 import { MedicalReport } from '../../models/medicalReport';
@@ -165,6 +165,7 @@ const UploadModal = ({ isOpen, onClose, onUploadComplete }: UploadModalProps): J
           className="upload-modal__cancel-btn"
           onClick={handleCancel}
         >
+          <IonIcon icon={closeCircleOutline} slot="start" />
           {t('common.cancel')}
         </IonButton>
       </div>
@@ -227,4 +228,4 @@ const UploadModal = ({ isOpen, onClose, onUploadComplete }: UploadModalProps): J
   );
 };
 
-export default UploadModal; 
+export default UploadModal;

frontend/src/common/hooks/useFileUpload.ts

@@ -45,18 +45,33 @@ export const useFileUpload = ({ onUploadComplete }: UseFileUploadOptions = {}):
   const [error, setError] = useState<string | null>(null);
   // Use a ref to track if upload should be canceled
   const cancelRef = useRef<boolean>(false);
+  // Use a ref to hold the AbortController
+  const abortControllerRef = useRef<AbortController | null>(null);
 
   const reset = useCallback(() => {
     setFile(null);
     setStatus(UploadStatus.IDLE);
     setProgress(0);
     setError(null);
     cancelRef.current = false;
+    
+    // Abort any pending requests from previous uploads
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+      abortControllerRef.current = null;
+    }
   }, []);
 
   const cancelUpload = useCallback(() => {
+    cancelRef.current = true;
+    
+    // Abort the ongoing request if there's one
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+      abortControllerRef.current = null;
+    }
+    
     if (status === UploadStatus.UPLOADING || status === UploadStatus.REQUESTING_PERMISSION) {
-      cancelRef.current = true;
       setStatus(UploadStatus.IDLE);
       setProgress(0);
     } else {
@@ -89,6 +104,20 @@ export const useFileUpload = ({ onUploadComplete }: UseFileUploadOptions = {}):
     setError(null);
   }, [t]);
 
+  // Extract the progress callback outside of uploadFile to reduce complexity
+  const createProgressCallback = useCallback((signal: AbortSignal): UploadProgressCallback => {
+    return (progress: number) => {
+      if (!cancelRef.current && !signal.aborted) {
+        setProgress(progress);
+      }
+    };
+  }, []);
+  
+  // Helper to check if the upload has been canceled
+  const isUploadCanceled = useCallback((signal: AbortSignal): boolean => {
+    return cancelRef.current || signal.aborted;
+  }, []);
+
   const uploadFile = useCallback(async () => {
     if (!file) {
       setError(t('upload.error.noFile'));
@@ -97,70 +126,88 @@ export const useFileUpload = ({ onUploadComplete }: UseFileUploadOptions = {}):
 
     // Reset cancel flag
     cancelRef.current = false;
+    
+    // Create a new AbortController for this upload request
+    abortControllerRef.current = new AbortController();
+    const { signal } = abortControllerRef.current;
 
     try {
       setStatus(UploadStatus.REQUESTING_PERMISSION);
 
-      // Check for permissions
-      let hasPermission = await checkFilePermissions();
+      // Check and request permissions if needed
+      const hasPermission = await checkPermissions();
 
       if (!hasPermission) {
-        // Request permissions
-        hasPermission = await requestFilePermissions();
-        
-        if (!hasPermission) {
-          setStatus(UploadStatus.ERROR);
-          setError(t('upload.error.permissionDenied'));
-          return;
-        }
+        setStatus(UploadStatus.ERROR);
+        setError(t('upload.error.permissionDenied'));
+        return;
       }
 
       // Check if canceled during permission check
-      if (cancelRef.current) {
+      if (isUploadCanceled(signal)) {
         setStatus(UploadStatus.IDLE);
         return;
       }
 
       setStatus(UploadStatus.UPLOADING);
       setProgress(0);
 
-      // Create a progress callback for the upload
-      const updateProgress: UploadProgressCallback = (progress) => {
-        // Only update progress if not canceled
-        if (!cancelRef.current) {
-          setProgress(progress);
-        }
-      };
+      // Get a progress callback
+      const updateProgress = createProgressCallback(signal);
 
-      // Upload the file using the API service
-      const result = await uploadReport(file, updateProgress);
+      // Upload the file
+      const result = await uploadReport(file, updateProgress, signal);
 
       // Check if canceled during upload
-      if (cancelRef.current) {
+      if (isUploadCanceled(signal)) {
         setStatus(UploadStatus.IDLE);
         return;
       }
 
-      // Set progress to 100% to indicate completion
+      // Success
       setProgress(1);
       setStatus(UploadStatus.SUCCESS);
 
-      // Notify parent component if callback provided
       if (onUploadComplete) {
         onUploadComplete(result);
       }
     } catch (error) {
-      // Don't show error if canceled
-      if (!cancelRef.current) {
-        setStatus(UploadStatus.ERROR);
-        setError(
-          error instanceof Error 
-            ? error.message 
-            : t('upload.error.unknown')
-        );
-      }
+      handleUploadError(error as Error, signal);
+    } finally {
+      cleanupAbortController(signal);
+    }
+  }, [file, onUploadComplete, t, createProgressCallback, isUploadCanceled]);
+
+  // Helper to handle file permissions
+  const checkPermissions = useCallback(async (): Promise<boolean> => {
+    let hasPermission = await checkFilePermissions();
+    
+    if (!hasPermission) {
+      hasPermission = await requestFilePermissions();
     }
-  }, [file, onUploadComplete, t]);
+    
+    return hasPermission;
+  }, []);
+  
+  // Helper to handle upload errors
+  const handleUploadError = useCallback((error: Error, signal: AbortSignal) => {
+    // Don't show error for aborted requests
+    if (error instanceof DOMException && error.name === 'AbortError') {
+      return;
+    }
+    
+    if (!isUploadCanceled(signal)) {
+      setStatus(UploadStatus.ERROR);
+      setError(error instanceof Error ? error.message : t('upload.error.unknown'));
+    }
+  }, [t, isUploadCanceled]);
+  
+  // Helper to clean up the AbortController
+  const cleanupAbortController = useCallback((signal: AbortSignal) => {
+    if (abortControllerRef.current?.signal === signal) {
+      abortControllerRef.current = null;
+    }
+  }, []);
 
   return {
     file,
@@ -173,4 +220,4 @@ export const useFileUpload = ({ onUploadComplete }: UseFileUploadOptions = {}):
     formatFileSize,
     cancelUpload
   };
-}; 
+};