Dropzone
A file upload dropzone for drag-and-drop or click-based document and media uploads.
import { Dropzone } from "@schukai/monster/source/components/form/dropzone.mjs";'%3E%3Cpath style='stroke:none;fill-rule:nonzero;fill:%23f03c2e;fill-opacity:1' d='M90.156 41.965 50.036 1.848a5.918 5.918 0 0 0-8.372 0l-8.328 8.332 10.566 10.566a7.03 7.03 0 0 1 7.23 1.684 7.034 7.034 0 0 1 1.669 7.277l10.187 10.184a7.028 7.028 0 0 1 7.278 1.672 7.04 7.04 0 0 1 0 9.957 7.05 7.05 0 0 1-9.965 0 7.044 7.044 0 0 1-1.528-7.66l-9.5-9.497V59.36a7.04 7.04 0 0 1 1.86 11.29 7.04 7.04 0 0 1-9.957 0 7.04 7.04 0 0 1 0-9.958 7.06 7.06 0 0 1 2.304-1.539V33.926a7.049 7.049 0 0 1-3.82-9.234L29.242 14.272 1.73 41.777a5.925 5.925 0 0 0 0 8.371L41.852 90.27a5.925 5.925 0 0 0 8.37 0l39.934-39.934a5.925 5.925 0 0 0 0-8.371'/%3E%3C/g%3E%3C/svg%3E "View source code")
Introduction
The Monster Dropzone handles click-based and drag-and-drop uploads in one consistent upload surface. Use it when files, images or documents should be attached through a clear drop area instead of a hidden file input alone.
When to use Dropzone
- Use it for uploads with visual affordance: Users immediately understand where files belong.
- Use it for media and document workflows: Especially useful when multiple upload paths should feel unified.
- Do not use it for tiny hidden uploads: If there is no visible upload workflow, a plain file input may be enough.
Typical mistakes
Make the upload contract clear. Users should know file types, size limits and what happens after upload, otherwise even a visually good dropzone still feels unreliable.
Simple Dropzone
A basic dropzone for multiple files. Auto upload is disabled so you can validate or prepare files before sending them to the server.
Javascript
import '@schukai/monster/source/components/form/dropzone.mjs';
const dropzone = document.querySelector('#dropzone');
dropzone.setOption('features.autoUpload', false);
dropzone.setOption('accept', '.pdf,.png,.jpg,.jpeg');
dropzone.setOption('labels.title', 'Upload documents');
dropzone.setOption('labels.hint', 'or drag and drop them here');
dropzone.setOption('labels.button', 'Choose files');<script type="module">import '@schukai/monster/source/components/form/dropzone.mjs';
const dropzone = document.createElement('monster-dropzone');
dropzone.setOption('features.autoUpload', false);
dropzone.setOption('accept', '.pdf,.png,.jpg,.jpeg');
dropzone.setOption('labels.title', 'Upload documents');
dropzone.setOption('labels.hint', 'or drag and drop them here');
dropzone.setOption('labels.button', 'Choose files');
document.getElementById('dropzone-simple').appendChild(dropzone);</script>HTML
<monster-dropzone id="dropzone"></monster-dropzone>Stylesheet
/** no additional stylesheet is defined **/Profile Image Upload
A single-file dropzone for profile images. File types are restricted to images, and the control shows previews for quick confirmation.
Javascript
import '@schukai/monster/source/components/form/dropzone.mjs';
const dropzone = document.querySelector('#avatar-dropzone');
dropzone.setOption('features.autoUpload', false);
dropzone.setOption('features.previewImages', true);
dropzone.setOption('multiple', false);
dropzone.setOption('accept', 'image/*');
dropzone.setOption('labels.title', 'Upload a profile image');
dropzone.setOption('labels.hint', 'PNG or JPG, max 5 MB');
dropzone.setOption('labels.button', 'Choose image');<script type="module">import '@schukai/monster/source/components/form/dropzone.mjs';
const dropzone = document.createElement('monster-dropzone');
dropzone.setOption('features.autoUpload', false);
dropzone.setOption('features.previewImages', true);
dropzone.setOption('multiple', false);
dropzone.setOption('accept', 'image/*');
dropzone.setOption('labels.title', 'Upload a profile image');
dropzone.setOption('labels.hint', 'PNG or JPG, max 5 MB');
dropzone.setOption('labels.button', 'Choose image');
document.getElementById('dropzone-avatar').appendChild(dropzone);</script>HTML
<monster-dropzone id="avatar-dropzone"></monster-dropzone>Stylesheet
/** no additional stylesheet is defined **/Component Design
The dropzone is implemented with the Shadow DOM, which encapsulates its structure and styling. Customization is enabled through exported parts and theme variables.
Exported Parts
Use the ::part() selector to style the component without breaking encapsulation.
control: Wrapper for the dropzone, status, and list.dropzone: The interactive drag-and-drop area.content: Container for title and hint.title: Title text inside the dropzone.hint: Hint text inside the dropzone.button: The internal action button.input: The hidden file input.status: Upload status line below the dropzone.list: List container for selected files.
monster-dropzone::part(dropzone) {
border-style: solid;
border-color: #c7d2fe;
background-color: #f8faff;
}
monster-dropzone::part(title) {
font-weight: 700;
}
monster-dropzone::part(list) {
margin-top: 1rem;
}
Theme Variables
The component relies on global Monster theme variables. You can override them on the host to align the dropzone with your design system.
monster-dropzone {
--monster-border-radius: 12px;
--monster-bg-color-primary-1: #f5f6f8;
--monster-color-primary-1: #1f2937;
}
HTML Structure
<monster-dropzone></monster-dropzone>JavaScript Initialization
const element = document.createElement('monster-dropzone');
document.body.appendChild(element);Exported
DropzoneDerived from
CustomElementOptions
The Options listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class. Therefore, it inherits Options from these parent classes. If you cannot find a specific Options in this list, we recommend consulting the documentation of the CustomElement.
- since
- deprecated
Properties and Attributes
The Properties and Attributes listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits Properties and Attributes from these parent classes. If you cannot find a specific Properties and Attributes in this list, we recommend consulting the documentation of the CustomElement.
data-monster-options: Sets the configuration options for the collapse component when used as an HTML attribute.data-monster-option-[name]: Sets the value of the configuration option[name]for the collapse component when used as an HTML attribute.
Methods
The methods listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits methods from these parent classes. If you cannot find a specific method in this list, we recommend consulting the documentation of the CustomElement.
Behavioral methods
open()- {void}
Static methods
[instanceSymbol]()- {symbol}
instanceof operator.getCSSStyleSheet()- {CSSStyleSheet[]}
getTag()- {string}
Lifecycle methods
Lifecycle methods are called by the environment and are usually not intended to be called directly.
[assembleMethodSymbol]()Other methods
upload(files)files{filelist|file[]}: files
- {Promise
}
Events
The component emits the following events:
monster-dropzone-selectedmonster-dropzone-file-addedmonster-dropzone-file-removedmonster-dropzone-file-retrymonster-dropzone-file-upload-startmonster-dropzone-file-upload-successmonster-dropzone-file-upload-errormonster-dropzone-upload-startmonster-dropzone-upload-successmonster-dropzone-upload-error
For more information on how to handle events, see the mdn documentation.