0
# MIME Type Utilities
1

2
Pre-defined constants and utility arrays for common file type filtering and validation in dropzone components.
3

4
## Capabilities
5

6
### MIME_TYPES Constant
7

8
Object containing common MIME type mappings for various file formats.
9

10
```typescript { .api }
11
/**
12
 * Object containing common MIME type mappings
13
 * Provides type-safe access to standard MIME types for file validation
14
 */
15
const MIME_TYPES: {
16
  // Images
17
  png: 'image/png';
18
  gif: 'image/gif';
19
  jpeg: 'image/jpeg';
20
  svg: 'image/svg+xml';
21
  webp: 'image/webp';
22
  avif: 'image/avif';
23
  heic: 'image/heic';
24
  heif: 'image/heif';
25
  
26
  // Documents
27
  mp4: 'video/mp4';
28
  zip: 'application/zip';
29
  rar: 'application/x-rar';
30
  '7z': 'application/x-7z-compressed';
31
  csv: 'text/csv';
32
  pdf: 'application/pdf';
33
  doc: 'application/msword';
34
  docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
35
  xls: 'application/vnd.ms-excel';
36
  xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
37
  ppt: 'application/vnd.ms-powerpoint';
38
  pptx: 'application/vnd.openxmlformats-officedocument.presentationml.presentation';
39
  exe: 'application/vnd.microsoft.portable-executable';
40
};
41
```
42

43
**Usage Examples:**
44

45
```typescript
46
import { Dropzone, MIME_TYPES } from "@mantine/dropzone";
47

48
// Accept specific image types
49
function ImageDropzone() {
50
  return (
51
    <Dropzone
52
      accept={[MIME_TYPES.png, MIME_TYPES.jpeg, MIME_TYPES.gif]}
53
      onDrop={(files) => console.log(files)}
54
    >
55
      <div>Drop PNG, JPEG, or GIF images</div>
56
    </Dropzone>
57
  );
58
}
59

60
// Accept documents
61
function DocumentDropzone() {
62
  return (
63
    <Dropzone
64
      accept={[MIME_TYPES.pdf, MIME_TYPES.docx, MIME_TYPES.xlsx]}
65
      onDrop={(files) => console.log(files)}
66
    >
67
      <div>Drop PDF, Word, or Excel files</div>
68
    </Dropzone>
69
  );
70
}
71

72
// Mixed file types
73
function MixedDropzone() {
74
  const acceptedTypes = [
75
    MIME_TYPES.png,
76
    MIME_TYPES.jpeg,
77
    MIME_TYPES.pdf,
78
    MIME_TYPES.csv
79
  ];
80
  
81
  return (
82
    <Dropzone
83
      accept={acceptedTypes}
84
      onDrop={(files) => console.log(files)}
85
    >
86
      <div>Drop images, PDFs, or CSV files</div>
87
    </Dropzone>
88
  );
89
}
90
```
91

92
### IMAGE_MIME_TYPE Array
93

94
Pre-defined array of image MIME types for convenient image-only validation.
95

96
```typescript { .api }
97
/**
98
 * Array containing all supported image MIME types
99
 * Convenient for restricting dropzone to images only
100
 */
101
const IMAGE_MIME_TYPE: string[];
102
```
103

104
Contains: `['image/png', 'image/gif', 'image/jpeg', 'image/svg+xml', 'image/webp', 'image/avif', 'image/heic', 'image/heif']`
105

106
**Usage Examples:**
107

108
```typescript
109
import { Dropzone, IMAGE_MIME_TYPE } from "@mantine/dropzone";
110

111
// Accept any image type
112
function AnyImageDropzone() {
113
  return (
114
    <Dropzone
115
      accept={IMAGE_MIME_TYPE}
116
      onDrop={(files) => console.log('Images:', files)}
117
    >
118
      <div>Drop any image file</div>
119
    </Dropzone>
120
  );
121
}
122

123
// Image dropzone with size limit
124
function LimitedImageDropzone() {
125
  return (
126
    <Dropzone
127
      accept={IMAGE_MIME_TYPE}
128
      maxSize={5 * 1024 * 1024} // 5MB
129
      onDrop={(files) => console.log('Images:', files)}
130
      onReject={(files) => console.log('Rejected:', files)}
131
    >
132
      <Dropzone.Accept>Drop images here</Dropzone.Accept>
133
      <Dropzone.Reject>Images must be under 5MB</Dropzone.Reject>
134
      <Dropzone.Idle>Drop images or click to select</Dropzone.Idle>
135
    </Dropzone>
136
  );
137
}
138
```
139

140
### PDF_MIME_TYPE Array
141

142
Array containing PDF MIME type for PDF-specific validation.
143

144
```typescript { .api }
145
/**
146
 * Array containing PDF MIME type
147
 * Convenient for PDF-only dropzones
148
 */
149
const PDF_MIME_TYPE: string[];
150
```
151

152
Contains: `['application/pdf']`
153

154
**Usage Example:**
155

156
```typescript
157
import { Dropzone, PDF_MIME_TYPE } from "@mantine/dropzone";
158

159
function PDFDropzone() {
160
  return (
161
    <Dropzone
162
      accept={PDF_MIME_TYPE}
163
      onDrop={(files) => console.log('PDFs:', files)}
164
    >
165
      <div>Drop PDF files only</div>
166
    </Dropzone>
167
  );
168
}
169
```
170

171
### MS_WORD_MIME_TYPE Array
172

173
Array containing Microsoft Word document MIME types.
174

175
```typescript { .api }
176
/**
177
 * Array containing Microsoft Word MIME types
178
 * Supports both .doc and .docx formats
179
 */
180
const MS_WORD_MIME_TYPE: string[];
181
```
182

183
Contains: `['application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document']`
184

185
**Usage Example:**
186

187
```typescript
188
import { Dropzone, MS_WORD_MIME_TYPE } from "@mantine/dropzone";
189

190
function WordDropzone() {
191
  return (
192
    <Dropzone
193
      accept={MS_WORD_MIME_TYPE}
194
      onDrop={(files) => console.log('Word docs:', files)}
195
    >
196
      <div>Drop Word documents (.doc or .docx)</div>
197
    </Dropzone>
198
  );
199
}
200
```
201

202
### MS_EXCEL_MIME_TYPE Array
203

204
Array containing Microsoft Excel spreadsheet MIME types.
205

206
```typescript { .api }
207
/**
208
 * Array containing Microsoft Excel MIME types
209
 * Supports both .xls and .xlsx formats
210
 */
211
const MS_EXCEL_MIME_TYPE: string[];
212
```
213

214
Contains: `['application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet']`
215

216
**Usage Example:**
217

218
```typescript
219
import { Dropzone, MS_EXCEL_MIME_TYPE } from "@mantine/dropzone";
220

221
function ExcelDropzone() {
222
  return (
223
    <Dropzone
224
      accept={MS_EXCEL_MIME_TYPE}
225
      onDrop={(files) => console.log('Excel files:', files)}
226
    >
227
      <div>Drop Excel spreadsheets (.xls or .xlsx)</div>
228
    </Dropzone>
229
  );
230
}
231
```
232

233
### MS_POWERPOINT_MIME_TYPE Array
234

235
Array containing Microsoft PowerPoint presentation MIME types.
236

237
```typescript { .api }
238
/**
239
 * Array containing Microsoft PowerPoint MIME types
240
 * Supports both .ppt and .pptx formats
241
 */
242
const MS_POWERPOINT_MIME_TYPE: string[];
243
```
244

245
Contains: `['application/vnd.ms-powerpoint', 'application/vnd.openxmlformats-officedocument.presentationml.presentation']`
246

247
**Usage Example:**
248

249
```typescript
250
import { Dropzone, MS_POWERPOINT_MIME_TYPE } from "@mantine/dropzone";
251

252
function PowerPointDropzone() {
253
  return (
254
    <Dropzone
255
      accept={MS_POWERPOINT_MIME_TYPE}
256
      onDrop={(files) => console.log('PowerPoint files:', files)}
257
    >
258
      <div>Drop PowerPoint presentations (.ppt or .pptx)</div>
259
    </Dropzone>
260
  );
261
}
262
```
263

264
### EXE_MIME_TYPE Array
265

266
Array containing executable file MIME type.
267

268
```typescript { .api }
269
/**
270
 * Array containing executable MIME type
271
 * For Windows executable files
272
 */
273
const EXE_MIME_TYPE: string[];
274
```
275

276
Contains: `['application/vnd.microsoft.portable-executable']`
277

278
**Usage Example:**
279

280
```typescript
281
import { Dropzone, EXE_MIME_TYPE } from "@mantine/dropzone";
282

283
function ExecutableDropzone() {
284
  return (
285
    <Dropzone
286
      accept={EXE_MIME_TYPE}
287
      onDrop={(files) => console.log('Executable files:', files)}
288
    >
289
      <div>Drop executable files (.exe)</div>
290
    </Dropzone>
291
  );
292
}
293
```
294

295
## Combined Usage Examples
296

297
```typescript
298
import { 
299
  Dropzone, 
300
  MIME_TYPES, 
301
  IMAGE_MIME_TYPE, 
302
  PDF_MIME_TYPE,
303
  MS_WORD_MIME_TYPE 
304
} from "@mantine/dropzone";
305

306
// Office documents dropzone
307
function OfficeDropzone() {
308
  const officeTypes = [
309
    ...MS_WORD_MIME_TYPE,
310
    ...MS_EXCEL_MIME_TYPE,
311
    ...MS_POWERPOINT_MIME_TYPE,
312
    ...PDF_MIME_TYPE
313
  ];
314
  
315
  return (
316
    <Dropzone
317
      accept={officeTypes}
318
      onDrop={(files) => console.log('Office files:', files)}
319
    >
320
      <div>Drop Word, Excel, PowerPoint, or PDF files</div>
321
    </Dropzone>
322
  );
323
}
324

325
// Media files dropzone
326
function MediaDropzone() {
327
  const mediaTypes = [
328
    ...IMAGE_MIME_TYPE,
329
    MIME_TYPES.mp4
330
  ];
331
  
332
  return (
333
    <Dropzone
334
      accept={mediaTypes}
335
      onDrop={(files) => console.log('Media files:', files)}
336
    >
337
      <div>Drop images or videos</div>
338
    </Dropzone>
339
  );
340
}
341

342
// Archive files dropzone
343
function ArchiveDropzone() {
344
  const archiveTypes = [
345
    MIME_TYPES.zip,
346
    MIME_TYPES.rar,
347
    MIME_TYPES['7z']
348
  ];
349
  
350
  return (
351
    <Dropzone
352
      accept={archiveTypes}
353
      onDrop={(files) => console.log('Archive files:', files)}
354
    >
355
      <div>Drop ZIP, RAR, or 7Z files</div>
356
    </Dropzone>
357
  );
358
}
359
```
360

361
## Type Safety
362

363
All MIME type constants are properly typed, providing IntelliSense support and compile-time validation when using TypeScript. The constants ensure consistency and prevent typos in MIME type specifications.