---
title: DropZone
description: Lets users upload files through drag-and-drop functionality into a designated area on a page, or by activating a button.
api_version: 2025-10
api_name: checkout-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/checkout-ui-extensions/latest/polaris-web-components/forms/dropzone
  md: https://shopify.dev/docs/api/checkout-ui-extensions/latest/polaris-web-components/forms/dropzone.md
---

# Drop​Zone

Lets users upload files through drag-and-drop functionality into a designated area on a page, or by activating a button.

## Properties

* accept

  string

  Default: ''

  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.

* accessibilityLabel

  string

  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.

* disabled

  boolean

  Default: false

  Disables the field, disallowing any interaction.

* error

  string

  Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately.

* id

  string

  A unique identifier for the element.

* label

  string

  Content to use as the field label.

* multiple

  boolean

  Default: false

  Whether multiple files can be selected or dropped at once.

* name

  string

  An identifier for the field that is unique within the nearest containing form.

* required

  boolean

  Default: false

  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.

* value

  string

  Default: ''

  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.

## Events

* change

  ((event: CallbackEventListener\<typeof tagName>) => void) | null

  Callback when the user has finished selecting a file or files.

* droprejected

  ((event: CallbackEventListener\<typeof tagName>) => void) | null

  Callback when rejected files are dropped. Files are rejected based on the `accept` prop.

* input

  ((event: CallbackEventListener\<typeof tagName>) => void) | null

  Callback when the user makes any changes in the field.

### CallbackEventListener

```ts
(EventListener & {
    (event: CallbackEvent<TTagName, TEvent>): void;
}) | null
```

### CallbackEvent

```ts
TEvent & {
    currentTarget: HTMLElementTagNameMap[TTagName];
}
```

### Examples

* #### Code

  ##### Default

  ```html
  <s-drop-zone accept="image/*"></s-drop-zone>
  ```

## Preview

![An image showcasing the DropZone component with a button to add files with error and dragged over states.](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/drop-zone-default.png)

## Best Practices

### File storage

File storage for uploads must be implemented separately. Metafields and the corresponding [Checkout API](https://shopify.dev/docs/api/checkout-ui-extensions/latest/apis/metafields) or [Customer Accounts API](https://shopify.dev/docs/api/customer/latest/mutations/metafieldsSet) can be utilized to store references to files alongside the relevant objects.

### Mobile

Remember that the drag and drop feature won’t be effective on mobile devices. Adding a button can offer additional context and guide users through the next steps.

![An example showing DropZone with custom content optimized for mobile devices](https://shopify.dev/images/landing-pages/templated-apis/checkout-ui-extensions/ui-components/dropzone-mobile-example.png)

### Minimum size

To prevent cut-off text and spacing issues, the minimum size of a Dropzone should be 100px by 100px.

![An example showing DropZone with correct minimum size](https://shopify.dev/images/landing-pages/templated-apis/checkout-ui-extensions/ui-components/dropzone-minimum-size.png)