Drop Zone
Lets users upload files through drag-and-drop functionality into a designated area on a page, or by activating a button.
Anchor to propertiesProperties
- Anchor to acceptacceptstring
A string representing the types of files that are accepted by the drop zone. This string is a comma-separated list of unique file type specifiers which can be one of the following:
- A file extension starting with a period (".") character (e.g. .jpg, .pdf, .doc)
- A valid MIME type string with no extensions
If omitted, all file types are accepted.
- Anchor to accessibilityLabelaccessibilityLabelstring
A label that describes the purpose or contents of the item. When set, it will be announced to buyers using assistive technologies and will provide them with more context.
- Anchor to disableddisabledboolean
Disables the field, disallowing any interaction.
- Anchor to errorerrorstring
Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately.
- Anchor to filesfilesFile[]
An array of File objects representing the files currently selected by the user.
This property is read-only and cannot be directly modified. To clear the selected files, set the
value
prop to an empty string or null.- Anchor to labellabelstring
Content to use as the field label.
- Anchor to labelAccessibilityVisibilitylabelAccessibilityVisibility"visible" | "exclusive"
Changes the visibility of the component's label.
visible
: the label is visible to all users.exclusive
: the label is visually hidden but remains in the accessibility tree.
- Anchor to multiplemultipleboolean
Whether multiple files can be selected or dropped at once.
- Anchor to namenamestring
An identifier for the field that is unique within the nearest containing form.
- Anchor to requiredrequiredboolean
Whether the field needs a value. This requirement adds semantic value to the field, but it will not cause an error to appear automatically. If you want to present an error when this field is empty, you can do so with the
error
property.- Anchor to valuevaluestring
A string that represents the path to the selected file(s). If no file is selected yet, the value is an empty string (""). When the user selected multiple files, the value represents the first file in the list of files they selected. The value is always the file's name prefixed with "C:\fakepath", which isn't the real path of the file.
Anchor to eventsEvents
Learn more about registering events.
- Anchor to changechangeCallbackEventListener<typeof tagName>
- Anchor to droprejecteddroprejectedCallbackEventListener<typeof tagName>
- Anchor to inputinputCallbackEventListener<typeof tagName>
CallbackEventListener
(EventListener & {
(event: CallbackEvent<T>): void;
}) | null
CallbackEvent
Event & {
currentTarget: HTMLElementTagNameMap[T];
}
Code
Examples
Code
Default
<s-drop-zone label="Upload" accessibilityLabel="Upload image of type jpg, png, or gif" accept=".jpg,.png,.gif" multiple onInput="console.log('onInput', event.currentTarget?.value)" onChange="console.log('onChange', event.currentTarget?.value)" onDropRejected="console.log('onDropRejected', event.currentTarget?.value)" ></s-drop-zone>