Layr
⌘K
Ctrl K
Design Systems
AI Designer
Account
Roadmap
Sign in
Adobe Spectrum - DropZone
Getting started
Adobe Spectrum
Spectrum UI
Pro
Components
Autocomplete
Breadcrumbs
Button
Calendar
Checkbox
Checkbox Group
Color Area
Color Field
Color Picker
Color Slider
Color Swatch
Color Swatch Picker
Color Wheel
Combo Box
Date Field
Date Picker
Date Range Picker
Dialog
Disclosure
Disclosure Group
Drop Zone
File Trigger
Form
Grid List
Group
Link
List Box
Menu
Meter
Modal
Number Field
Popover
Progress Bar
Radio Group
Range Calendar
Search Field
Select
Slider
Switch
Table
Tabs
Tag Group
Text Field
Time Field
Toast
Toggle Button
Toggle Button Group
Toolbar
Tooltip
Tree
Virtualizer
Advanced
React Aria Components
Styling
</div> <h2>Events</h2> <div class="example-section"> <div class="draggable" draggable="true" id="draggable-text"> Drag me </div> <div id="event-dropzone" class="dropzone"> <div class="dropzone-label">Drop here</div> </div> </div> <h2>Labeling</h2> <div class="example-section"> <div id="labeled-dropzone" class="dropzone"> <div class="dropzone-label">Drop files here</div> </div> </div> <h2>FileTrigger</h2> <div class="example-section"> <div id="file-dropzone" class="dropzone"> <div class="file-trigger"> <sp-button id="file-button">Select files</sp-button> <input type="file" id="file-input" class="file-input" multiple> </div> <div class="dropzone-label">Drop files here</div> </div> </div> <h2>Visual Feedback</h2> <div class="example-section"> <div class="visual-feedback"> <div class="feedback-item"> <div class="feedback-icon icon-default">📁</div> <div>Default</div> </div> <div class="feedback-item"> <div class="feedback-icon icon-hover">📂</div> <div>Hover</div> </div> <div class="feedback-item"> <div class="feedback-icon icon-drop">📥</div> <div>Drop Target</div> </div> <div class="feedback-item"> <div class="feedback-icon icon-success">✅</div> <div>Success</div> </div> </div> <div id="visual-dropzone" class="dropzone"> <div class="dropzone-label">Drop PNG files here</div> </div> </div> <h2>Props</h2> <table class="props-table"> <thead> <tr> <th>Name</th> <th>Type</th> <th>Default</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td>onDrop</td> <td>(e: DropEvent) => void</td> <td>-</td> <td>Handler that is called when a valid drop occurs.</td> </tr> <tr> <td>onDropEnter</td> <td>(e: DropEvent) => void</td> <td>-</td> <td>Handler that is called when a drag enters the drop target.</td> </tr> <tr> <td>onDropExit</td> <td>(e: DropEvent) => void</td> <td>-</td> <td>Handler that is called when a drag exits the drop target.</td> </tr> <tr> <td>getDropOperation</td> <td>(types: Set<string>) => DropOperation</td> <td>-</td> <td>Function that returns the drop operation to be performed.</td> </tr> <tr> <td>isDisabled</td> <td>boolean</td> <td>false</td> <td>Whether the drop zone is disabled.</td> </tr> </tbody> </table> <h2>Styling</h2> <div class="anatomy-section"> <p>React Aria components can be styled in many ways, including using CSS classes, inline styles, utility classes (e.g. Tailwind), CSS-in-JS (e.g. Styled Components), etc.</p> <div class="code-block">.react-aria-DropZone { /* Base styles */}.react-aria-DropZone[data-drop-target] { /* Drop target styles */}.react-aria-DropZone[data-focus-visible] { /* Focus styles */} </div> </div> <h2>Keyboard Shortcuts</h2> <div class="anatomy-section"> <p>The following keyboard shortcuts are available:</p> <ul> <li><span class="keyboard-shortcut">Space</span> or <span class="keyboard-shortcut">Enter</span> - Opens file dialog when FileTrigger is present</li> <li><span class="keyboard-shortcut">Ctrl+V</span> / <span class="keyboard-shortcut">Cmd+V</span> - Paste files from clipboard</li> <li><span class="keyboard-shortcut">Tab</span> - Navigate to/from the drop zone</li> </ul> </div> <h2 id="feedback">Feedback</h2> <p>Help us improve this component by providing feedback, asking questions on GitHub, or updating this file.</p> </div> <script> // Basic DropZone functionality function setupDropZone(element, options = {}) { const label = element.querySelector('.dropzone-label'); const originalText = label.textContent; // Drag and drop events element.addEventListener('dragover', (e) => { e.preventDefault(); element.classList.add('drag-over'); if (options.onDragOver) options.onDragOver(e); }); element.addEventListener('dragleave', (e) => { if (!element.contains(e.relatedTarget)) { element.classList.remove('drag-over'); if (options.onDragLeave) options.onDragLeave(e); } }); element.addEventListener('drop', (e) => { e.preventDefault(); element.classList.remove('drag-over'); element.classList.add('dropped'); if (options.onDrop) { options.onDrop(e); } else { label.textContent = 'Drop successful!'; label.classList.add('dropzone-success'); setTimeout(() => { element.classList.remove('dropped'); label.textContent = originalText; label.classList.remove('dropzone-success'); }, 2000); } }); // Click handler for accessibility element.addEventListener('click', (e) => { if (options.onClick) options.onClick(e); }); // Keyboard support element.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); if (options.onActivate) options.onActivate(e); } }); // Make focusable element.setAttribute('tabindex', '0'); element.setAttribute('role', 'button'); element.setAttribute('aria-label', originalText); } // Setup basic dropzone const basicDropzone = document.getElementById('basic-dropzone'); setupDropZone(basicDropzone); // Setup event dropzone with draggable const eventDropzone = document.getElementById('event-dropzone'); const draggableText = document.getElementById('draggable-text'); draggableText.addEventListener('dragstart', (e) => { e.dataTransfer.setData('text/plain', 'hello world'); draggableText.classList.add('dragging'); }); draggableText.addEventListener('dragend', () => { draggableText.classList.remove('dragging'); }); setupDropZone(eventDropzone, { onDrop: (e) => { const data = e.dataTransfer.getData('text/plain'); const label = eventDropzone.querySelector('.dropzone-label'); label.textContent = data || 'Dropped!'; label.classList.add('dropzone-success'); eventDropzone.classList.add('dropped'); setTimeout(() => { eventDropzone.classList.remove('dropped'); label.textContent = 'Drop here'; label.classList.remove('dropzone-success'); }, 2000); } }); // Setup labeled dropzone const labeledDropzone = document.getElementById('labeled-dropzone'); setupDropZone(labeledDropzone); // Setup file dropzone const fileDropzone = document.getElementById('file-dropzone'); const fileButton = document.getElementById('file-button'); const fileInput = document.getElementById('file-input'); fileButton.addEventListener('click', () => { fileInput.click(); }); fileInput.addEventListener('change', (e) => { const files = Array.from(e.target.files); const label = fileDropzone.querySelector('.dropzone-label'); if (files.length > 0) { const filenames = files.map(f => f.name).join(', '); label.textContent = filenames; label.classList.add('dropzone-success'); fileDropzone.classList.add('dropped'); setTimeout(() => { fileDropzone.classList.remove('dropped'); label.textContent = 'Drop files here'; label.classList.remove('dropzone-success'); }, 3000); } }); setupDropZone(fileDropzone, { onDrop: (e) => { const files = Array.from(e.dataTransfer.files); const label = fileDropzone.querySelector('.dropzone-label'); if (files.length > 0) { const filenames = files.map(f => f.name).join(', '); label.textContent = filenames; label.classList.add('dropzone-success'); fileDropzone.classList.add('dropped'); setTimeout(() => { fileDropzone.classList.remove('dropped'); label.textContent = 'Drop files here'; label.classList.remove('dropzone-success'); }, 3000); } }, onActivate: () => { fileInput.click(); } }); // Setup visual feedback dropzone const visualDropzone = document.getElementById('visual-dropzone'); setupDropZone(visualDropzone, { onDragOver: (e) => { const types = Array.from(e.dataTransfer.types); const label = visualDropzone.querySelector('.dropzone-label'); if (types.includes('Files')) { label.textContent = 'Drop PNG files here'; } else { label.textContent = 'Only PNG files accepted'; visualDropzone.style.borderColor = '#ff6b6b'; visualDropzone.style.background = '#ffe6e6'; } }, onDragLeave: () => { const label = visualDropzone.querySelector('.dropzone-label'); label.textContent = 'Drop PNG files here'; visualDropzone.style.borderColor = ''; visualDropzone.style.background = ''; }, onDrop: (e) => { const files = Array.from(e.dataTransfer.files); const pngFiles = files.filter(f => f.type === 'image/png'); const label = visualDropzone.querySelector('.dropzone-label'); if (pngFiles.length > 0) { label.textContent = `${pngFiles.length} PNG file(s) dropped!`; label.classList.add('dropzone-success'); visualDropzone.classList.add('dropped'); setTimeout(() => { visualDropzone.classList.remove('dropped'); label.textContent = 'Drop PNG files here'; label.classList.remove('dropzone-success'); }, 3000); } else { label.textContent = 'Only PNG files are accepted'; visualDropzone.style.borderColor = '#ff6b6b'; visualDropzone.style.background = '#ffe6e6'; setTimeout(() => { label.textContent = 'Drop PNG files here'; visualDropzone.style.borderColor = ''; visualDropzone.style.background = ''; }, 2000); } } }); // Add paste support to all dropzones document.addEventListener('paste', (e) => { const activeDropzone = document.activeElement; if (activeDropzone && activeDropzone.classList.contains('dropzone')) { const items = Array.from(e.clipboardData.items); const files = items.filter(item => item.kind === 'file').map(item => item.getAsFile()); if (files.length > 0) { const label = activeDropzone.querySelector('.dropzone-label'); const filenames = files.map(f => f.name).join(', '); label.textContent = `Pasted: ${filenames}`; label.classList.add('dropzone-success'); activeDropzone.classList.add('dropped'); setTimeout(() => { activeDropzone.classList.remove('dropped'); label.textContent = label.textContent.includes('PNG') ? 'Drop PNG files here' : 'Drop files here'; label.classList.remove('dropzone-success'); }, 3000); } } }); </script></body></html>' width="100%" height="1200" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">