Dropzone
A dropzone control for uploading documents via click or drag and drop.
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 control provides a structured area for selecting files via click or drag and drop. It displays a list of selected files, optional image previews, and upload progress once uploads are started.
Selection Modes
By default, the dropzone accepts multiple files. To limit it to a single file, set multiple to false. You can also restrict the file types with the accept option.
Upload Behavior
The features.autoUpload flag controls whether files are uploaded immediately after selection. For manual flows, disable auto upload and call upload(files) on demand. The upload target is defined through the url option.
Events and Hooks
The dropzone fires events such as monster-dropzone-selected and monster-dropzone-file-added so you can react to user actions. For more control, provide callbacks through actions to intercept uploads or handle success and error states.
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');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');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.