File MIME Types

Constants defining supported file MIME types and extensions for file upload components and file handling operations throughout the WorkPayCore frontend application.

Overview

The file MIME types constants provide standardized definitions for acceptable file formats in various upload contexts, ensuring consistent file validation and handling across the application.

MIME Type Constants

imageOnlyMimesTypes

Array of MIME types specifically for image and document uploads that accept images and Excel files.

Value:

export const imageOnlyMimesTypes = [
  'image/png',
  'image/jpeg',
  'image/jpg',
  'application/vnd.ms-excel',
  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
] as const;

Supported Formats:

• PNG Images: image/png
• JPEG Images: image/jpeg, image/jpg
• Excel Files: application/vnd.ms-excel (legacy .xls)
• Excel Files: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet (modern .xlsx)

Use Cases:

• Employee profile photo uploads
• Document attachments with Excel support
• Report uploads requiring image or spreadsheet formats
• Asset management image uploads

---

pdfMimeTypes

Array of MIME types specifically for PDF documents.

Value:

export const pdfMimeTypes = ['pdf', 'application/pdf'] as const;

Supported Formats:

• PDF Documents: pdf, application/pdf

Use Cases:

• Contract document uploads
• Policy document attachments
• Legal document submissions
• PDF report downloads

---

imageAndPdfMimesTypes

Combined array supporting both images and PDF documents for general file uploads.

Value:

export const imageAndPdfMimesTypes = [
  'image/png',
  'image/jpeg',
  'image/jpg',
  'pdf',
  'application/pdf',
];

Supported Formats:

• PNG Images: image/png
• JPEG Images: image/jpeg, image/jpg
• PDF Documents: pdf, application/pdf

Use Cases:

• Expense receipt uploads
• Supporting document attachments
• General document submissions
• Leave application attachments

---

TypeScript Types

ImageOnlyMimeTypes

Type definition for type-safe usage of image-only MIME types.

export type ImageOnlyMimeTypes = typeof imageOnlyMimesTypes;

Usage:

import {
  imageOnlyMimesTypes,
  ImageOnlyMimeTypes,
} from '@/utils/constants/fileMimeTypes';

// Type-safe function parameter
function validateFileType(file: File, allowedTypes: ImageOnlyMimeTypes) {
  return allowedTypes.includes(file.type as any);
}

---

Usage Examples

File Upload Component

import { imageAndPdfMimesTypes } from '@/utils/constants/fileMimeTypes';
import { StableFormFileUpload } from '@/components/Upload';

const DocumentUpload = () => {
  return (
    <StableFormFileUpload
      acceptProps={{
        mimeTypes: imageAndPdfMimesTypes,
        displayText: 'Accepts .jpg, .png and .pdf (10MB max size)',
      }}
      multiple={true}
      name='supporting_documents'
      label='Upload Supporting Documents'
      value={files}
      onChange={setFiles}
      onRemove={removeFile}
    />
  );
};

File Validation

import {
  imageOnlyMimesTypes,
  pdfMimeTypes,
} from '@/utils/constants/fileMimeTypes';

const validateFile = (file: File, context: 'image' | 'pdf' | 'general') => {
  const allowedTypes = {
    image: imageOnlyMimesTypes,
    pdf: pdfMimeTypes,
    general: [...imageOnlyMimesTypes, ...pdfMimeTypes],
  };

  const isValidType = allowedTypes[context].includes(file.type as any);
  const isValidSize = file.size <= 10 * 1024 * 1024; // 10MB

  return {
    isValid: isValidType && isValidSize,
    error: !isValidType
      ? 'Invalid file type'
      : !isValidSize
      ? 'File too large (max 10MB)'
      : null,
  };
};

Dynamic File Type Display

import { imageAndPdfMimesTypes } from '@/utils/constants/fileMimeTypes';

const getFileTypeDisplay = (mimeTypes: string[]) => {
  const typeMap = {
    'image/png': '.png',
    'image/jpeg': '.jpg',
    'image/jpg': '.jpg',
    pdf: '.pdf',
    'application/pdf': '.pdf',
    'application/vnd.ms-excel': '.xls',
    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':
      '.xlsx',
  };

  const extensions = mimeTypes.map(type => typeMap[type]).filter(Boolean);
  const uniqueExtensions = [...new Set(extensions)];

  return `Accepts ${uniqueExtensions.join(', ')} files`;
};

// Usage
const displayText = getFileTypeDisplay(imageAndPdfMimesTypes);
// Returns: "Accepts .png, .jpg, .pdf files"

Dropzone Configuration

import { useDropzone } from 'react-dropzone';
import { imageAndPdfMimesTypes } from '@/utils/constants/fileMimeTypes';

const FileDropzone = () => {
  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    accept: imageAndPdfMimesTypes.reduce((acc, mimeType) => {
      acc[mimeType] = [];
      return acc;
    }, {}),
    maxSize: 10 * 1024 * 1024, // 10MB
    multiple: true,
    onDrop: acceptedFiles => {
      console.log('Accepted files:', acceptedFiles);
    },
  });

  return (
    <div {...getRootProps()}>
      <input {...getInputProps()} />
      {isDragActive ? (
        <p>Drop the files here...</p>
      ) : (
        <p>Drag and drop files here, or click to select</p>
      )}
    </div>
  );
};

---

File Size Recommendations

Maximum File Sizes by Context

• Profile Images: 2MB maximum
• Document Uploads: 10MB maximum
• Bulk Upload Files: 200MB maximum
• Report Attachments: 50MB maximum

Performance Considerations

const getMaxFileSize = (context: string) => {
  const sizes = {
    profile: 2 * 1024 * 1024, // 2MB
    document: 10 * 1024 * 1024, // 10MB
    bulk: 200 * 1024 * 1024, // 200MB
    report: 50 * 1024 * 1024, // 50MB
  };

  return sizes[context] || sizes.document;
};

---

Browser Compatibility

Supported MIME Types by Browser

Most modern browsers support these MIME types consistently:

• Images: Universal support for PNG, JPEG
• PDF: Native support in modern browsers
• Excel: Requires appropriate applications or browser plugins

Fallback Handling

const isMimeTypeSupported = (mimeType: string) => {
  // Check if browser supports the MIME type
  const supportedTypes = [
    'image/png',
    'image/jpeg',
    'image/jpg',
    'application/pdf',
  ];

  return supportedTypes.includes(mimeType);
};

---

Security Considerations

File Validation Best Practices

1. Always validate MIME types on both frontend and backend
2. Check file signatures to prevent MIME type spoofing
3. Limit file sizes to prevent DoS attacks
4. Scan files for malware before processing

Secure File Handling

import { imageAndPdfMimesTypes } from '@/utils/constants/fileMimeTypes';

const secureFileValidation = (file: File) => {
  // MIME type validation
  if (!imageAndPdfMimesTypes.includes(file.type as any)) {
    throw new Error('Invalid file type');
  }

  // File extension validation
  const allowedExtensions = ['.png', '.jpg', '.jpeg', '.pdf'];
  const fileExtension = file.name.toLowerCase().split('.').pop();

  if (!allowedExtensions.includes(`.${fileExtension}`)) {
    throw new Error('Invalid file extension');
  }

  // Size validation
  const maxSize = 10 * 1024 * 1024; // 10MB
  if (file.size > maxSize) {
    throw new Error('File too large');
  }

  return true;
};

---

Common Use Cases

Expense Management

// Expense receipt uploads
const expenseReceiptTypes = imageAndPdfMimesTypes;

Employee Onboarding

// Document verification uploads
const verificationDocTypes = imageAndPdfMimesTypes;

HR Document Management

// Contract and policy uploads
const hrDocumentTypes = [...imageOnlyMimesTypes, ...pdfMimeTypes];

Profile Management

// Profile photo uploads
const profilePhotoTypes = imageOnlyMimesTypes.filter(type =>
  type.startsWith('image/'),
);

---

Error Messages

Standard Error Messages

const FILE_ERROR_MESSAGES = {
  INVALID_TYPE: 'Please upload a valid file type',
  TOO_LARGE: 'File size must be less than 10MB',
  TOO_MANY: 'Maximum number of files exceeded',
  UPLOAD_FAILED: 'File upload failed. Please try again',
} as const;

---

Related Utilities

• String Utilities - For file name processing
• General Helpers - For file extension extraction
• Browser Utils - For browser capability detection

---

TypeScript Definitions

export const imageOnlyMimesTypes: readonly [
  'image/png',
  'image/jpeg',
  'image/jpg',
  'application/vnd.ms-excel',
  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
];

export const pdfMimeTypes: readonly ['pdf', 'application/pdf'];

export const imageAndPdfMimesTypes: readonly [
  'image/png',
  'image/jpeg',
  'image/jpg',
  'pdf',
  'application/pdf',
];

export type ImageOnlyMimeTypes = typeof imageOnlyMimesTypes;

---

Migration Notes

When updating file type support:

1. Add new MIME types to appropriate constants
2. Update TypeScript types for type safety
3. Test file validation across different browsers
4. Update documentation and user-facing messages
5. Consider backward compatibility with existing uploads

---

Following these file MIME type constants ensures consistent file handling across the WorkPayCore frontend application while maintaining security and user experience standards.