0
# Mantine Dropzone
1

2
Mantine Dropzone is a React component library providing drag-and-drop file upload functionality built on top of react-dropzone. It integrates seamlessly with Mantine's theming system and component architecture, offering flexible file capture interfaces with built-in accessibility, validation, and visual feedback.
3

4
## Package Information
5

6
- **Package Name**: @mantine/dropzone
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install @mantine/dropzone @mantine/core @mantine/hooks`
10

11
## Core Imports
12

13
```typescript
14
import { Dropzone } from "@mantine/dropzone";
15
```
16

17
For specific components:
18

19
```typescript
20
import { 
21
  Dropzone, 
22
  DropzoneFullScreen,
23
  DropzoneAccept,
24
  DropzoneIdle,
25
  DropzoneReject 
26
} from "@mantine/dropzone";
27
```
28

29
For MIME type utilities:
30

31
```typescript
32
import { 
33
  MIME_TYPES, 
34
  IMAGE_MIME_TYPE, 
35
  PDF_MIME_TYPE 
36
} from "@mantine/dropzone";
37
```
38

39
For CommonJS:
40

41
```javascript
42
const { Dropzone, DropzoneFullScreen } = require("@mantine/dropzone");
43
```
44

45
For CSS styles:
46

47
```typescript
48
import "@mantine/dropzone/styles.css";
49
```
50

51
## Basic Usage
52

53
```typescript
54
import { Dropzone, MIME_TYPES } from "@mantine/dropzone";
55

56
function Demo() {
57
  return (
58
    <Dropzone
59
      onDrop={(files) => console.log('accepted files', files)}
60
      onReject={(files) => console.log('rejected files', files)}
61
      maxSize={3 * 1024 ** 2}
62
      accept={[MIME_TYPES.png, MIME_TYPES.jpeg, MIME_TYPES.pdf]}
63
    >
64
      <Dropzone.Accept>Drop files here</Dropzone.Accept>
65
      <Dropzone.Reject>Invalid files</Dropzone.Reject>
66
      <Dropzone.Idle>Drop files or click to select</Dropzone.Idle>
67
    </Dropzone>
68
  );
69
}
70
```
71

72
## Architecture
73

74
Mantine Dropzone is built around several key components:
75

76
- **Core Dropzone**: Main file drop component with extensive configuration options
77
- **Status Components**: Conditional rendering components (Accept, Reject, Idle) for visual feedback
78
- **FullScreen Mode**: Browser-wide dropzone that activates when files are dragged over the window
79
- **Context System**: React context for sharing dropzone state between components
80
- **MIME Type Utilities**: Pre-defined constants for common file type filtering
81
- **Mantine Integration**: Full theming support and component factory patterns
82

83
## Capabilities
84

85
### Core Dropzone Component
86

87
Main dropzone component providing file drag-and-drop functionality with extensive configuration options, validation, and Mantine theming integration.
88

89
```typescript { .api }
90
interface DropzoneProps {
91
  onDrop: (files: FileWithPath[]) => void;
92
  onReject?: (fileRejections: FileRejection[]) => void;
93
  onDropAny?: (files: FileWithPath[], fileRejections: FileRejection[]) => void;
94
  accept?: Accept | string[];
95
  maxSize?: number;
96
  maxFiles?: number;
97
  multiple?: boolean;
98
  disabled?: boolean;
99
  loading?: boolean;
100
  children?: React.ReactNode;
101
}
102

103
const Dropzone: React.FC<DropzoneProps> & {
104
  Accept: typeof DropzoneAccept;
105
  Idle: typeof DropzoneIdle;
106
  Reject: typeof DropzoneReject;
107
  FullScreen: typeof DropzoneFullScreen;
108
};
109
```
110

111
[Core Dropzone](./core-dropzone.md)
112

113
### Status Components
114

115
Conditional rendering components that show different content based on the current dropzone state (idle, accept, reject).
116

117
```typescript { .api }
118
interface DropzoneStatusProps {
119
  children: React.ReactNode;
120
}
121

122
const DropzoneAccept: React.FC<DropzoneStatusProps>;
123
const DropzoneIdle: React.FC<DropzoneStatusProps>;
124
const DropzoneReject: React.FC<DropzoneStatusProps>;
125
```
126

127
[Status Components](./status-components.md)
128

129
### FullScreen Dropzone
130

131
Browser-wide dropzone overlay that appears when files are dragged over the browser window, providing a full-screen drop target.
132

133
```typescript { .api }
134
interface DropzoneFullScreenProps {
135
  onDrop?: (files: FileWithPath[]) => void;
136
  onReject?: (fileRejections: FileRejection[]) => void;
137
  active?: boolean;
138
  zIndex?: React.CSSProperties['zIndex'];
139
  withinPortal?: boolean;
140
  portalProps?: Omit<BasePortalProps, 'withinPortal'>;
141
  children?: React.ReactNode;
142
}
143

144
const DropzoneFullScreen: React.FC<DropzoneFullScreenProps>;
145
```
146

147
[FullScreen Dropzone](./fullscreen-dropzone.md)
148

149
### MIME Type Utilities
150

151
Pre-defined constants and arrays for common file type filtering and validation.
152

153
```typescript { .api }
154
const MIME_TYPES: {
155
  png: 'image/png';
156
  gif: 'image/gif';
157
  jpeg: 'image/jpeg';
158
  svg: 'image/svg+xml';
159
  webp: 'image/webp';
160
  avif: 'image/avif';
161
  heic: 'image/heic';
162
  heif: 'image/heif';
163
  mp4: 'video/mp4';
164
  zip: 'application/zip';
165
  rar: 'application/x-rar';
166
  '7z': 'application/x-7z-compressed';
167
  csv: 'text/csv';
168
  pdf: 'application/pdf';
169
  doc: 'application/msword';
170
  docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
171
  xls: 'application/vnd.ms-excel';
172
  xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
173
  ppt: 'application/vnd.ms-powerpoint';
174
  pptx: 'application/vnd.openxmlformats-officedocument.presentationml.presentation';
175
  exe: 'application/vnd.microsoft.portable-executable';
176
};
177

178
const IMAGE_MIME_TYPE: string[];
179
const PDF_MIME_TYPE: string[];
180
const MS_WORD_MIME_TYPE: string[];
181
const MS_EXCEL_MIME_TYPE: string[];
182
const MS_POWERPOINT_MIME_TYPE: string[];
183
const EXE_MIME_TYPE: string[];
184
```
185

186
[MIME Type Utilities](./mime-types.md)
187

188
## Types
189

190
### File Types (Re-exported from react-dropzone)
191

192
```typescript { .api }
193
interface FileWithPath extends File {
194
  readonly path?: string;
195
}
196

197
interface FileRejection {
198
  file: FileWithPath;
199
  errors: FileError[];
200
}
201

202
interface FileError {
203
  code: string;
204
  message: string;
205
}
206

207
type Accept = Record<string, string[]>;
208

209
type DropEvent = React.DragEvent<HTMLElement> | Event;
210
```
211

212
### Theming Types
213

214
```typescript { .api }
215
type DropzoneVariant = 'filled' | 'light';
216

217
type DropzoneStylesNames = 'root' | 'inner';
218

219
type DropzoneCssVariables = {
220
  root:
221
    | '--dropzone-radius'
222
    | '--dropzone-accept-color'
223
    | '--dropzone-accept-bg'
224
    | '--dropzone-reject-color'
225
    | '--dropzone-reject-bg';
226
};
227
```
228

229
### Factory Types
230

231
```typescript { .api }
232
type DropzoneFactory = Factory<{
233
  props: DropzoneProps;
234
  ref: HTMLDivElement;
235
  stylesNames: DropzoneStylesNames;
236
  vars: DropzoneCssVariables;
237
  staticComponents: {
238
    Accept: typeof DropzoneAccept;
239
    Idle: typeof DropzoneIdle;
240
    Reject: typeof DropzoneReject;
241
    FullScreen: typeof DropzoneFullScreen;
242
  };
243
}>;
244
```
245

246
### Mantine Types
247

248
```typescript { .api }
249
type MantineColor = string;
250

251
type MantineRadius = number | string;
252

253
interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {}
254

255
interface StylesApiProps<T> {
256
  classNames?: Partial<Record<string, string>>;
257
  styles?: Partial<Record<string, React.CSSProperties>>;
258
  unstyled?: boolean;
259
}
260

261
interface ElementProps<T extends keyof JSX.IntrinsicElements, K extends keyof JSX.IntrinsicElements[T] = never> 
262
  extends Omit<JSX.IntrinsicElements[T], K> {}
263

264
interface Factory<T> {
265
  (props: T): React.ReactElement;
266
}
267

268
interface LoaderProps {
269
  size?: string | number;
270
  color?: string;
271
  variant?: string;
272
}
273

274
interface BasePortalProps {
275
  target?: HTMLElement | string;
276
  children?: React.ReactNode;
277
}
278
```