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 component and is available as <s-drop-zone> in API versions 2025-10 and newer.

Anchor to Updated propertiesUpdated properties

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

Anchor to onInputonInput

The previous DropZone onInput prop now uses the 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 property.

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>
  );
}

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);
      }}
    />
  );
}

Anchor to onDropRejectedonDropRejected

The previous DropZone onDropRejected prop still uses onDropRejected in Preact, but it now handles the 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.

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>
  );
}

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');
      }}
    />
  );
}

Anchor to New propertiesNew properties

The Polaris drop zone component introduces the following new properties: