0
# FullScreen Dropzone
1

2
The FullScreen Dropzone provides a browser-wide drop target that appears as an overlay when files are dragged over the browser window, offering an enhanced drag-and-drop experience.
3

4
## Capabilities
5

6
### DropzoneFullScreen Component
7

8
Browser-wide dropzone overlay that activates when files are dragged over the browser window, providing a full-screen drop target with portal support.
9

10
```typescript { .api }
11
/**
12
 * Full-screen dropzone overlay that appears when dragging files over browser window
13
 * @param props - Configuration options for the full-screen dropzone
14
 * @returns React component with full-screen drop functionality
15
 */
16
interface DropzoneFullScreenProps extends BoxProps, 
17
  Omit<DropzoneProps, 'styles' | 'classNames' | 'vars' | 'variant' | 'attributes'>,
18
  StylesApiProps<DropzoneFullScreenFactory>,
19
  ElementProps<'div', 'onDragLeave' | 'onDragOver' | 'onDrop' | 'onDragEnter'> {
20
    
21
  /** Determines whether user can drop files to browser window @default true */
22
  active?: boolean;
23
  
24
  /** Z-index value @default 9999 */
25
  zIndex?: React.CSSProperties['zIndex'];
26
  
27
  /** Determines whether component should be rendered within Portal @default true */
28
  withinPortal?: boolean;
29
  
30
  /** Props to pass down to the portal when withinPortal is true */
31
  portalProps?: Omit<BasePortalProps, 'withinPortal'>;
32
  
33
  /** Called when valid files are dropped */
34
  onDrop?: (files: FileWithPath[]) => void;
35
  
36
  /** Called when invalid files are dropped */
37
  onReject?: (fileRejections: FileRejection[]) => void;
38
  
39
  /** Component children, typically status components */
40
  children?: React.ReactNode;
41
}
42

43
const DropzoneFullScreen: React.FC<DropzoneFullScreenProps>;
44
```
45

46
**Usage Examples:**
47

48
```typescript
49
import { DropzoneFullScreen } from "@mantine/dropzone";
50

51
// Basic full-screen dropzone
52
function BasicFullScreen() {
53
  return (
54
    <DropzoneFullScreen
55
      onDrop={(files) => console.log('Dropped files:', files)}
56
    >
57
      <div style={{ 
58
        position: 'absolute', 
59
        top: '50%', 
60
        left: '50%', 
61
        transform: 'translate(-50%, -50%)',
62
        textAlign: 'center'
63
      }}>
64
        <Text size="xl">Drop files anywhere!</Text>
65
      </div>
66
    </DropzoneFullScreen>
67
  );
68
}
69

70
// Full-screen dropzone with file type restrictions
71
function RestrictedFullScreen() {
72
  return (
73
    <DropzoneFullScreen
74
      onDrop={(files) => console.log('Images dropped:', files)}
75
      onReject={(files) => console.log('Invalid files:', files)}
76
      accept={['image/*']}
77
      maxSize={5 * 1024 * 1024} // 5MB
78
    >
79
      <div style={{ 
80
        position: 'absolute', 
81
        top: '50%', 
82
        left: '50%', 
83
        transform: 'translate(-50%, -50%)',
84
        textAlign: 'center'
85
      }}>
86
        <Dropzone.Accept>
87
          <Text size="xl" color="green">Drop images here!</Text>
88
        </Dropzone.Accept>
89
        <Dropzone.Reject>
90
          <Text size="xl" color="red">Only images under 5MB allowed</Text>
91
        </Dropzone.Reject>
92
        <Dropzone.Idle>
93
          <Text size="xl">Drag images over the browser window</Text>
94
        </Dropzone.Idle>
95
      </div>
96
    </DropzoneFullScreen>
97
  );
98
}
99

100
// Conditional full-screen dropzone
101
function ConditionalFullScreen() {
102
  const [enabled, setEnabled] = useState(true);
103
  
104
  return (
105
    <div>
106
      <button onClick={() => setEnabled(!enabled)}>
107
        {enabled ? 'Disable' : 'Enable'} Full-Screen Drop
108
      </button>
109
      
110
      <DropzoneFullScreen
111
        active={enabled}
112
        onDrop={(files) => console.log('Files:', files)}
113
        zIndex={1000}
114
      >
115
        <div style={{ 
116
          position: 'absolute', 
117
          top: '50%', 
118
          left: '50%', 
119
          transform: 'translate(-50%, -50%)',
120
          textAlign: 'center',
121
          background: 'rgba(0, 0, 0, 0.8)',
122
          color: 'white',
123
          padding: '20px',
124
          borderRadius: '8px'
125
        }}>
126
          <Text size="xl">Drop files anywhere on the page!</Text>
127
        </div>
128
      </DropzoneFullScreen>
129
    </div>
130
  );
131
}
132

133
// Full-screen dropzone without portal
134
function NonPortalFullScreen() {
135
  return (
136
    <div style={{ position: 'relative', height: '100vh' }}>
137
      <DropzoneFullScreen
138
        onDrop={(files) => console.log(files)}
139
        withinPortal={false}
140
      >
141
        <div>Full-screen drop zone without portal</div>
142
      </DropzoneFullScreen>
143
    </div>
144
  );
145
}
146
```
147

148
### Default Props
149

150
The DropzoneFullScreen component comes with sensible defaults:
151

152
```typescript { .api }
153
const defaultProps = {
154
  maxSize: Infinity,
155
  activateOnDrag: true,
156
  dragEventsBubbling: true,
157
  activateOnKeyboard: true,
158
  active: true,
159
  zIndex: getDefaultZIndex('max'),
160
  withinPortal: true,
161
};
162
```
163

164
### Styling Types
165

166
```typescript { .api }
167
type DropzoneFullScreenStylesNames = DropzoneStylesNames | 'fullScreen';
168

169
type DropzoneFullScreenFactory = Factory<{
170
  props: DropzoneFullScreenProps;
171
  ref: HTMLDivElement;
172
  stylesNames: DropzoneFullScreenStylesNames;
173
  variant: DropzoneVariant;
174
}>;
175
```
176

177
## Behavior
178

179
### Activation Logic
180

181
The FullScreen Dropzone uses document-level event listeners to detect when files are dragged over the browser window:
182

183
1. **dragenter**: Increments counter and shows overlay when files detected
184
2. **dragleave**: Decrements counter and hides overlay when counter reaches 0
185
3. **Visibility**: Overlay appears/disappears based on drag state
186

187
### Portal Integration
188

189
By default, the component renders within a Portal, ensuring it appears above all other content. This can be disabled by setting `withinPortal={false}`.
190

191
### Z-Index Management
192

193
The component uses a high z-index value (9999 by default) to ensure it appears above other content. This can be customized via the `zIndex` prop.
194

195
### Event Handling
196

197
The component automatically handles:
198
- File drop events with validation
199
- Drag enter/leave detection 
200
- Counter-based visibility management
201
- Automatic cleanup on unmount
202

203
### Integration with Core Dropzone
204

205
FullScreen Dropzone internally uses the core Dropzone component but with `activateOnClick={false}` to prevent click-to-open behavior, focusing solely on drag-and-drop functionality.
206

207
## Use Cases
208

209
- **Global file upload**: Allow users to drop files anywhere on the page
210
- **Enhanced UX**: Provide visual feedback during drag operations
211
- **File import workflows**: Simplify file import in complex applications
212
- **Accessibility**: Provide large drop targets for easier file uploading