---
title: Migrate DropZone to the Polaris drop zone component
description: >-
  Learn how to migrate the DropZone component to Polaris web components in
  checkout and customer account UI extensions.
source_url:
  html: >-
    https://shopify.dev/docs/apps/build/checkout/migrate-to-web-components/drop-zone
  md: >-
    https://shopify.dev/docs/apps/build/checkout/migrate-to-web-components/drop-zone.md
---

# Migrate DropZone to the Polaris drop zone component

The Polaris drop zone component lets customers upload files through drag and drop or by clicking to browse. It replaces the previous [`DropZone`](https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/ui-components/forms/dropzone) component and is available as [`<s-drop-zone>`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/forms/drop-zone) in API versions 2025-10 and newer.

***

## Updated properties

The following properties are different in the Polaris drop zone component.

### on​Input

The previous `DropZone` `onInput` prop now uses the [`input`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/forms/drop-zone#events-propertydetail-input) event. In Preact, you still handle this with the `onInput` prop on `<s-drop-zone>`, but the handler now receives an event instead of the uploaded files directly.

Read uploaded files from the drop zone element's [`files`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/files) property.

## Migrating onInput

##### Latest (Preact)

```jsx
import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  return (
    <s-drop-zone
      label="Upload receipt"
      accept="image/*,.pdf"
      multiple
      onInput={(event) => {
        const files = Array.from(event.currentTarget.files ?? []);

        console.log('Files uploaded:', files);
      }}
    ></s-drop-zone>
  );
}
```

##### Pre-Polaris (2025-07)

```jsx
import {
  reactExtension,
  DropZone,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  return (
    <DropZone
      label="Upload receipt"
      accept="image/*,.pdf"
      multiple
      onInput={(files) => {
        console.log('Files uploaded:', files);
      }}
    />
  );
}
```

### on​Drop​Rejected

The previous `DropZone` `onDropRejected` prop still uses `onDropRejected` in Preact, but it now handles the [`droprejected`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/forms/drop-zone#events-propertydetail-droprejected) event.

The main difference is that the old callback received rejected files directly. The new callback receives an event object instead, and the rejected files aren't passed anymore.

## Migrating onDropRejected

##### Latest (Preact)

```jsx
import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  return (
    <s-drop-zone
      label="Upload images"
      accept="image/*"
      onDropRejected={(event) => {
        console.log('Drop rejected:', event);
        console.log('Only image files are accepted');
      }}
    ></s-drop-zone>
  );
}
```

##### Pre-Polaris (2025-07)

```jsx
import {
  reactExtension,
  DropZone,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  return (
    <DropZone
      label="Upload images"
      accept="image/*"
      onDropRejected={(files) => {
        console.log('Rejected files:', files);
        console.log('Only image files are accepted');
      }}
    />
  );
}
```

***

## New properties

The Polaris drop zone component introduces the following new properties:

| New prop | Type | Description |
| - | - | - |
| [`value`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/forms/drop-zone#properties-propertydetail-value) | `string` | Represents the selected file path. Set it to `''` to clear the field after an upload completes. |
| [`onChange`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/forms/drop-zone#events-propertydetail-change) | function | Fires after the user finishes selecting a file or files. |

***