UIFC-262 Add 50 MB file upload size limit to prevent DoS attacks

- Implement client-side file size validation (reject > 50 MB before upload)
- Refactor handleDrop to async/await for proper error propagation
- Add helper functions: createFileSizeErrorMessage, handlePayloadTooLargeError
- Sanitize backend error messages (reject HTML tags, >200 chars) to prevent XSS
- Handle HTTP 413 with fallback for malformed responses
- Fix validation error timing (show only after touch/submit, not immediately)
- Extract HTTP_STATUS_PAYLOAD_TOO_LARGE constant
- Add translations: fileTooLarge, backendRejected, network
- Update CHANGELOG

Author: slaemmer

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## 8.2.0 (IN PROGRESS)
 
+* Add file upload size validation and improved error handling ([UIFC-262](https://folio-org.atlassian.net/browse/UIFC-262))
 
 ## [8.1.0](https://github.com/folio-org/ui-finc-select/tree/v8.1.0) (2025-08-21)
 * Address code duplications ([UIFC-342](https://folio-org.atlassian.net/browse/UIFC-342))

src/components/Filters/FilterFile/UploadFile/FileUploaderField.js

@@ -3,6 +3,52 @@ import { useState, useEffect } from 'react';
 import { useIntl } from 'react-intl';
 
 import FileUploaderFieldView from './FileUploaderFieldView';
+import { isFileSizeValid, createFileSizeErrorDetails } from '../../../../util/fileUtils';
+
+const HTTP_STATUS_PAYLOAD_TOO_LARGE = 413;
+
+/**
+ * Helper function to create file size error message
+ * @param {number} fileSize - Size of the file in bytes
+ * @param {object} intl - Internationalization object
+ * @returns {string} Formatted error message
+ */
+const createFileSizeErrorMessage = (fileSize, intl) => {
+  const errorDetails = createFileSizeErrorDetails(fileSize);
+  return intl.formatMessage(
+    { id: 'ui-finc-select.filter.file.uploadError.fileTooLarge' },
+    {
+      actualSize: errorDetails.actualSize,
+      maxSize: errorDetails.maxSize,
+    }
+  );
+};
+
+/**
+ * Helper function to handle HTTP 413 Payload Too Large errors
+ * Sanitizes backend messages to prevent information disclosure
+ * @param {Response} response - HTTP response object
+ * @param {File} file - The uploaded file
+ * @param {object} intl - Internationalization object
+ * @returns {Promise<string>} Error message
+ */
+const handlePayloadTooLargeError = async (response, file, intl) => {
+  try {
+    const backendMessage = await response.text();
+    // Sanitize backend message - only show if it's a simple size message
+    // Reject messages that are too long or contain HTML tags (potential XSS)
+    if (backendMessage && backendMessage.length < 200 && !/<[^>]*>/.test(backendMessage)) {
+      return intl.formatMessage(
+        { id: 'ui-finc-select.filter.file.uploadError.backendRejected' },
+        { message: backendMessage }
+      );
+    }
+  } catch (error) {
+    // Fall through to default message if reading response body fails
+  }
+
+  return createFileSizeErrorMessage(file.size, intl);
+};
 
 const FileUploaderField = ({
   input: { onChange, value },
@@ -27,42 +73,50 @@ const FileUploaderField = ({
     }
   }, [value, file]);
 
-  const handleDrop = (acceptedFiles) => {
+  const handleDrop = async (acceptedFiles) => {
     if (acceptedFiles.length !== 1) return;
 
-    let mounted = true;
+    const file = acceptedFiles[0];
+
+    if (!isFileSizeValid(file.size)) {
+      const errorMessage = createFileSizeErrorMessage(file.size, intl);
+      setError(errorMessage);
+      setIsDropZoneActive(false);
+      setUploadInProgress(false);
+      return;
+    }
 
     setError(undefined);
     setIsDropZoneActive(false);
     setUploadInProgress(true);
 
-    onUploadFile(acceptedFiles[0])
-      .then(response => {
-        if (response.ok) {
-          // example: file = "34bdd9da-b765-448a-8519-11d460a4df5d"
-          response.text().then(fileId => {
-            // the value of the fieldId will connected with the Field in DocuemtsFieldArray with onChange(file);
-            onChange(fileId);
-            if (mounted) {
-              setFile({ fileId });
-            }
-          });
-        } else {
-          throw new Error(intl.formatMessage({ id: 'ui-finc-select.filter.file.uploadError' }));
-        }
-      })
-      .catch(err => {
-        console.error(err); // eslint-disable-line no-console
-        setError(err.message);
-        setFile({});
-      })
-      .finally(() => setUploadInProgress(false));
-    mounted = false;
+    try {
+      const response = await onUploadFile(file);
+
+      if (response.ok) {
+        const fileId = await response.text();
+        onChange(fileId);
+        setFile({ fileId });
+      } else if (response.status === HTTP_STATUS_PAYLOAD_TOO_LARGE) {
+        const errorMessage = await handlePayloadTooLargeError(response, file, intl);
+        throw new Error(errorMessage);
+      } else {
+        throw new Error(
+          intl.formatMessage({ id: 'ui-finc-select.filter.file.uploadError.network' })
+        );
+      }
+    } catch (err) {
+      console.error(err); // eslint-disable-line no-console
+      setError(err.message);
+      setFile({});
+    } finally {
+      setUploadInProgress(false);
+    }
   };
 
   return (
     <FileUploaderFieldView
-      error={meta.error || error}
+      error={error || ((meta.touched || meta.submitFailed) && meta.error)}
       isDropZoneActive={isDropZoneActive}
       onDragEnter={() => setIsDropZoneActive(true)}
       onDragLeave={() => setIsDropZoneActive(false)}

src/util/fileUtils.js

@@ -0,0 +1,45 @@
+// Maximum file upload size in bytes (50 MB)
+export const MAX_FILE_SIZE_BYTES = 50 * 1024 * 1024; // 52,428,800 bytes
+export const MAX_FILE_SIZE_MB = 50;
+
+/**
+ * Validates if a file size is within the allowed limit
+ * @param {number} sizeInBytes - File size in bytes
+ * @returns {boolean} True if valid, false otherwise
+ */
+export const isFileSizeValid = (sizeInBytes) => {
+  return sizeInBytes <= MAX_FILE_SIZE_BYTES;
+};
+
+/**
+ * Formats bytes to human-readable format
+ * @param {number} bytes - Size in bytes
+ * @param {number} decimals - Number of decimal places (default: 2)
+ * @returns {string} Formatted size string (e.g., "45.5 MB")
+ */
+export const formatBytes = (bytes, decimals = 2) => {
+  if (bytes === 0) return '0 Bytes';
+
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
+};
+
+/**
+ * Creates a detailed error message for file size validation
+ * @param {number} actualSizeBytes - Actual file size in bytes
+ * @param {number} maxSizeBytes - Maximum allowed size in bytes
+ * @returns {object} Error details with formatted message
+ */
+export const createFileSizeErrorDetails = (actualSizeBytes, maxSizeBytes = MAX_FILE_SIZE_BYTES) => {
+  return {
+    actualSize: formatBytes(actualSizeBytes),
+    maxSize: formatBytes(maxSizeBytes),
+    actualSizeBytes,
+    maxSizeBytes,
+  };
+};

src/util/fileUtils.test.js

@@ -0,0 +1,102 @@
+import {
+  MAX_FILE_SIZE_BYTES,
+  MAX_FILE_SIZE_MB,
+  isFileSizeValid,
+  formatBytes,
+  createFileSizeErrorDetails,
+} from './fileUtils';
+
+describe('fileUtils', () => {
+  describe('constants', () => {
+    it('should have correct MAX_FILE_SIZE_BYTES', () => {
+      expect(MAX_FILE_SIZE_BYTES).toBe(52428800); // 50 * 1024 * 1024
+    });
+
+    it('should have correct MAX_FILE_SIZE_MB', () => {
+      expect(MAX_FILE_SIZE_MB).toBe(50);
+    });
+  });
+
+  describe('isFileSizeValid', () => {
+    it('should accept file exactly at limit', () => {
+      expect(isFileSizeValid(MAX_FILE_SIZE_BYTES)).toBe(true);
+    });
+
+    it('should accept file under limit', () => {
+      expect(isFileSizeValid(MAX_FILE_SIZE_BYTES - 1)).toBe(true);
+      expect(isFileSizeValid(1024)).toBe(true);
+      expect(isFileSizeValid(1)).toBe(true);
+    });
+
+    it('should reject file over limit', () => {
+      expect(isFileSizeValid(MAX_FILE_SIZE_BYTES + 1)).toBe(false);
+      expect(isFileSizeValid(100 * 1024 * 1024)).toBe(false);
+    });
+
+    it('should handle zero size', () => {
+      expect(isFileSizeValid(0)).toBe(true);
+    });
+  });
+
+  describe('formatBytes', () => {
+    it('should format zero bytes', () => {
+      expect(formatBytes(0)).toBe('0 Bytes');
+    });
+
+    it('should format bytes correctly', () => {
+      expect(formatBytes(100)).toBe('100 Bytes');
+      expect(formatBytes(1024)).toBe('1 KB');
+      expect(formatBytes(1048576)).toBe('1 MB');
+      expect(formatBytes(MAX_FILE_SIZE_BYTES)).toBe('50 MB');
+    });
+
+    it('should format with custom decimals', () => {
+      expect(formatBytes(1536, 0)).toBe('2 KB');
+      expect(formatBytes(1536, 3)).toBe('1.5 KB');
+      expect(formatBytes(1536, 1)).toBe('1.5 KB');
+      expect(formatBytes(1536000, 3)).toBe('1.465 MB');
+    });
+
+    it('should handle large files', () => {
+      expect(formatBytes(1073741824)).toBe('1 GB');
+      expect(formatBytes(1073741824 * 2)).toBe('2 GB');
+    });
+
+    it('should handle fractional MB', () => {
+      expect(formatBytes(1572864)).toBe('1.5 MB');
+    });
+  });
+
+  describe('createFileSizeErrorDetails', () => {
+    it('should create error details with formatted sizes', () => {
+      const details = createFileSizeErrorDetails(100 * 1024 * 1024);
+      expect(details.actualSize).toBe('100 MB');
+      expect(details.maxSize).toBe('50 MB');
+      expect(details.actualSizeBytes).toBe(104857600);
+      expect(details.maxSizeBytes).toBe(MAX_FILE_SIZE_BYTES);
+    });
+
+    it('should create error details for small files', () => {
+      const details = createFileSizeErrorDetails(1024);
+      expect(details.actualSize).toBe('1 KB');
+      expect(details.maxSize).toBe('50 MB');
+      expect(details.actualSizeBytes).toBe(1024);
+      expect(details.maxSizeBytes).toBe(MAX_FILE_SIZE_BYTES);
+    });
+
+    it('should handle custom max size', () => {
+      const customMax = 10 * 1024 * 1024; // 10 MB
+      const details = createFileSizeErrorDetails(15 * 1024 * 1024, customMax);
+      expect(details.actualSize).toBe('15 MB');
+      expect(details.maxSize).toBe('10 MB');
+      expect(details.actualSizeBytes).toBe(15728640);
+      expect(details.maxSizeBytes).toBe(customMax);
+    });
+
+    it('should handle zero size', () => {
+      const details = createFileSizeErrorDetails(0);
+      expect(details.actualSize).toBe('0 Bytes');
+      expect(details.maxSize).toBe('50 MB');
+    });
+  });
+});

translations/ui-finc-select/en.json

@@ -100,6 +100,9 @@
   "filter.file.connected": "The filter file {filename} is connected.",
   "filter.file.placeholder.name": "Enter a name to identify the connected file",
   "filter.file.uploadError": "An error occurred during upload",
+  "filter.file.uploadError.fileTooLarge": "File size ({actualSize}) exceeds the maximum allowed size of {maxSize}.",
+  "filter.file.uploadError.backendRejected": "Server rejected the file: {message}",
+  "filter.file.uploadError.network": "Network error occurred during upload. Please try again.",
 
   "filter.generalAccordion": "General",
   "filter.fileAccordion": "File",