---
title: Drop zone
description: >-
  The drop zone component lets users upload files through drag-and-drop or by
  clicking to browse. Use for file uploads such as images, documents, or CSV
  imports.


  The component provides visual feedback during drag operations and supports
  file type validation through the `accept` property. Rejected files trigger the
  `droprejected` event for custom error handling.
api_version: 2026-01
api_name: customer-account-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2026-01/web-components/forms/drop-zone
  md: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2026-01/web-components/forms/drop-zone.md
---

# Drop zone

The drop zone component lets users upload files through drag-and-drop or by clicking to browse. Use for file uploads such as images, documents, or CSV imports.

The component provides visual feedback during drag operations and supports file type validation through the `accept` property. Rejected files trigger the `droprejected` event for custom error handling.

### Support Targets (24)

### Supported targets

* customer-account.​footer.​render-after
* customer-account.​order-index.​announcement.​render
* customer-account.​order-index.​block.​render
* customer-account.​order-status.​announcement.​render
* customer-account.​order-status.​block.​render
* customer-account.​order-status.​cart-line-item.​render-after
* customer-account.​order-status.​cart-line-list.​render-after
* customer-account.​order-status.​customer-information.​render-after
* customer-account.​order-status.​fulfillment-details.​render-after
* customer-account.​order-status.​payment-details.​render-after
* customer-account.​order-status.​return-details.​render-after
* customer-account.​order-status.​unfulfilled-items.​render-after
* customer-account.​order.​action.​menu-item.​render
* customer-account.​order.​action.​render
* customer-account.​order.​page.​render
* customer-account.​page.​render
* customer-account.​profile.​addresses.​render-after
* customer-account.​profile.​announcement.​render
* customer-account.​profile.​block.​render
* customer-account.​profile.​company-details.​render-after
* customer-account.​profile.​company-location-addresses.​render-after
* customer-account.​profile.​company-location-payment.​render-after
* customer-account.​profile.​company-location-staff.​render-after
* customer-account.​profile.​payment.​render-after

## 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

Learn more about [registering events](https://shopify.dev/docs/api/checkout-ui-extensions/latest/using-polaris-components#event-handling).

* **change**

  **CallbackEventListener\<typeof tagName>**

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

* **droprejected**

  **CallbackEventListener\<typeof tagName>**

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

* **input**

  **CallbackEventListener\<typeof tagName>**

  Callback when the user makes any changes in the field.

### CallbackEventListener

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

### CallbackEvent

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

Examples

## Preview

![](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2026-04/drop-zone-default-pFHBTAa5.png)

### Examples

* #### Code

  ##### Default

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

## Best Practices

* **File storage:** Implement file storage separately. Use Metafields through the Checkout API or Customer Accounts API to store references to uploaded files.
* **Mobile considerations:** Drag and drop functionality is limited on mobile devices. Include a button to help guide users to select files.
* **Minimum size:** Keep the DropZone at least 100px × 100px to avoid cut-off text and spacing issues.