MIME Type Utilities

/**
 * Object containing common MIME type mappings
 * Provides type-safe access to standard MIME types for file validation
 */
const MIME_TYPES: {
  // Images
  png: 'image/png';
  gif: 'image/gif';
  jpeg: 'image/jpeg';
  svg: 'image/svg+xml';
  webp: 'image/webp';
  avif: 'image/avif';
  heic: 'image/heic';
  heif: 'image/heif';
  
  // Documents
  mp4: 'video/mp4';
  zip: 'application/zip';
  rar: 'application/x-rar';
  '7z': 'application/x-7z-compressed';
  csv: 'text/csv';
  pdf: 'application/pdf';
  doc: 'application/msword';
  docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
  xls: 'application/vnd.ms-excel';
  xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
  ppt: 'application/vnd.ms-powerpoint';
  pptx: 'application/vnd.openxmlformats-officedocument.presentationml.presentation';
  exe: 'application/vnd.microsoft.portable-executable';
};

import { Dropzone, MIME_TYPES } from "@mantine/dropzone";

// Accept specific image types
function ImageDropzone() {
  return (
    <Dropzone
      accept={[MIME_TYPES.png, MIME_TYPES.jpeg, MIME_TYPES.gif]}
      onDrop={(files) => console.log(files)}
    >
      <div>Drop PNG, JPEG, or GIF images</div>
    </Dropzone>
  );
}

// Accept documents
function DocumentDropzone() {
  return (
    <Dropzone
      accept={[MIME_TYPES.pdf, MIME_TYPES.docx, MIME_TYPES.xlsx]}
      onDrop={(files) => console.log(files)}
    >
      <div>Drop PDF, Word, or Excel files</div>
    </Dropzone>
  );
}

// Mixed file types
function MixedDropzone() {
  const acceptedTypes = [
    MIME_TYPES.png,
    MIME_TYPES.jpeg,
    MIME_TYPES.pdf,
    MIME_TYPES.csv
  ];
  
  return (
    <Dropzone
      accept={acceptedTypes}
      onDrop={(files) => console.log(files)}
    >
      <div>Drop images, PDFs, or CSV files</div>
    </Dropzone>
  );
}

/**
 * Array containing all supported image MIME types
 * Convenient for restricting dropzone to images only
 */
const IMAGE_MIME_TYPE: string[];

import { Dropzone, IMAGE_MIME_TYPE } from "@mantine/dropzone";

// Accept any image type
function AnyImageDropzone() {
  return (
    <Dropzone
      accept={IMAGE_MIME_TYPE}
      onDrop={(files) => console.log('Images:', files)}
    >
      <div>Drop any image file</div>
    </Dropzone>
  );
}

// Image dropzone with size limit
function LimitedImageDropzone() {
  return (
    <Dropzone
      accept={IMAGE_MIME_TYPE}
      maxSize={5 * 1024 * 1024} // 5MB
      onDrop={(files) => console.log('Images:', files)}
      onReject={(files) => console.log('Rejected:', files)}
    >
      <Dropzone.Accept>Drop images here</Dropzone.Accept>
      <Dropzone.Reject>Images must be under 5MB</Dropzone.Reject>
      <Dropzone.Idle>Drop images or click to select</Dropzone.Idle>
    </Dropzone>
  );
}

/**
 * Array containing PDF MIME type
 * Convenient for PDF-only dropzones
 */
const PDF_MIME_TYPE: string[];

import { Dropzone, PDF_MIME_TYPE } from "@mantine/dropzone";

function PDFDropzone() {
  return (
    <Dropzone
      accept={PDF_MIME_TYPE}
      onDrop={(files) => console.log('PDFs:', files)}
    >
      <div>Drop PDF files only</div>
    </Dropzone>
  );
}

/**
 * Array containing Microsoft Word MIME types
 * Supports both .doc and .docx formats
 */
const MS_WORD_MIME_TYPE: string[];

import { Dropzone, MS_WORD_MIME_TYPE } from "@mantine/dropzone";

function WordDropzone() {
  return (
    <Dropzone
      accept={MS_WORD_MIME_TYPE}
      onDrop={(files) => console.log('Word docs:', files)}
    >
      <div>Drop Word documents (.doc or .docx)</div>
    </Dropzone>
  );
}

/**
 * Array containing Microsoft Excel MIME types
 * Supports both .xls and .xlsx formats
 */
const MS_EXCEL_MIME_TYPE: string[];

import { Dropzone, MS_EXCEL_MIME_TYPE } from "@mantine/dropzone";

function ExcelDropzone() {
  return (
    <Dropzone
      accept={MS_EXCEL_MIME_TYPE}
      onDrop={(files) => console.log('Excel files:', files)}
    >
      <div>Drop Excel spreadsheets (.xls or .xlsx)</div>
    </Dropzone>
  );
}

/**
 * Array containing Microsoft PowerPoint MIME types
 * Supports both .ppt and .pptx formats
 */
const MS_POWERPOINT_MIME_TYPE: string[];

import { Dropzone, MS_POWERPOINT_MIME_TYPE } from "@mantine/dropzone";

function PowerPointDropzone() {
  return (
    <Dropzone
      accept={MS_POWERPOINT_MIME_TYPE}
      onDrop={(files) => console.log('PowerPoint files:', files)}
    >
      <div>Drop PowerPoint presentations (.ppt or .pptx)</div>
    </Dropzone>
  );
}

/**
 * Array containing executable MIME type
 * For Windows executable files
 */
const EXE_MIME_TYPE: string[];

import { Dropzone, EXE_MIME_TYPE } from "@mantine/dropzone";

function ExecutableDropzone() {
  return (
    <Dropzone
      accept={EXE_MIME_TYPE}
      onDrop={(files) => console.log('Executable files:', files)}
    >
      <div>Drop executable files (.exe)</div>
    </Dropzone>
  );
}

import { 
  Dropzone, 
  MIME_TYPES, 
  IMAGE_MIME_TYPE, 
  PDF_MIME_TYPE,
  MS_WORD_MIME_TYPE 
} from "@mantine/dropzone";

// Office documents dropzone
function OfficeDropzone() {
  const officeTypes = [
    ...MS_WORD_MIME_TYPE,
    ...MS_EXCEL_MIME_TYPE,
    ...MS_POWERPOINT_MIME_TYPE,
    ...PDF_MIME_TYPE
  ];
  
  return (
    <Dropzone
      accept={officeTypes}
      onDrop={(files) => console.log('Office files:', files)}
    >
      <div>Drop Word, Excel, PowerPoint, or PDF files</div>
    </Dropzone>
  );
}

// Media files dropzone
function MediaDropzone() {
  const mediaTypes = [
    ...IMAGE_MIME_TYPE,
    MIME_TYPES.mp4
  ];
  
  return (
    <Dropzone
      accept={mediaTypes}
      onDrop={(files) => console.log('Media files:', files)}
    >
      <div>Drop images or videos</div>
    </Dropzone>
  );
}

// Archive files dropzone
function ArchiveDropzone() {
  const archiveTypes = [
    MIME_TYPES.zip,
    MIME_TYPES.rar,
    MIME_TYPES['7z']
  ];
  
  return (
    <Dropzone
      accept={archiveTypes}
      onDrop={(files) => console.log('Archive files:', files)}
    >
      <div>Drop ZIP, RAR, or 7Z files</div>
    </Dropzone>
  );
}