Migrate to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use web components, native UI elements with built-in accessibility, better performance, and consistent styling with Shopify's design system. Check out the migration guide to upgrade your extension.

Choose a version:

DropZone

The drop zone component lets customers upload files through drag-and-drop or by clicking to browse. Drop zone doesn't offer image upload preview capabilities because the extension and host operate on separate domains, which prevents the use of object URLs directly in an image component.

Any element focused within the drop zone component, including child elements such as the "Add file" button, will initiate the file selector when the Enter or Spacebar key is pressed.

Support

Targets (25)

Supported targets

Anchor to PropertiesProperties

Configure the following properties on the DropZone component.

Anchor to accept accept string: A string representing the types of files that are accepted by the dropzone. 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 (such as .jpg, .pdf, .doc)

A valid MIME type string with no extensions

If left empty, the dropzone will accept all files.

Learn more about the accept attribute.
Anchor to accessibilityLabel accessibilityLabel string: A label that describes the purpose or contents of the item. When set, it will be announced to users of assistive technologies and will provide them with more context.
Anchor to disabled disabled boolean: Whether the drop zone is disabled, preventing any user interaction.
Anchor to error error string: An error message displayed below the field to indicate validation problems. When set, the drop zone is styled with error indicators.
Anchor to id id string: A unique identifier for the component. Use this to target the component in scripts or stylesheets, or to distinguish it from other instances of the same component.
Anchor to label label string: The text displayed as the field label, which identifies the purpose of the drop zone to users.
Anchor to multiple multiple boolean Default: false: Defines if the user can select or drop multiple files at once.
Anchor to name name string: An identifier for the field that is unique within the nearest containing Form component.
Anchor to onDropRejected onDropRejected (files: File[]) => void: A callback fired when rejected files are dropped. Files are rejected based on the accept prop.
Anchor to onInput onInput (files: File[]) => void: A callback fired when files are dropped or selected.

Learn more about the drop event.
Anchor to required required boolean: 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 prop.

Anchor to ExamplesExamples

Anchor to Upload a fileUpload a file

Use drop zone to let customers upload files by dragging and dropping or clicking to browse. This example shows a basic file upload area with error handling and a drag-over state.

Upload a file

A drop zone component with an Add file button, showing error and drag-over states

Upload a file

import {

reactExtension,

DropZone,

} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(

'customer-account.page.render',

() => <Extension />,

);

function Extension() {

return <DropZone accept="image/*" />;

}

import {DropZone, extension} from '@shopify/ui-extensions/customer-account';

export default extension('customer-account.page.render', (root) => {

const dropZone = root.createComponent(DropZone, {

accept: 'image/*',

});

root.appendChild(dropZone);

});

React

import {
  reactExtension,
  DropZone,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
  'customer-account.page.render',
  () => <Extension />,
);

function Extension() {
  return <DropZone accept="image/*" />;
}

JS

import {DropZone, extension} from '@shopify/ui-extensions/customer-account';

export default extension('customer-account.page.render', (root) => {
  const dropZone = root.createComponent(DropZone, {
    accept: 'image/*',
  });

  root.appendChild(dropZone);
});

Anchor to Best practicesBest practices

Specify accepted types: Use the accept property to restrict uploads to expected file types, such as image/* or application/pdf.
Mobile considerations: Drag and drop functionality is limited on mobile devices. Include a button to help guide customers to select files.
Minimum size: Keep the drop zone at least 100px × 100px to avoid cut-off text and spacing issues.
Implement file storage separately: Use metafields and the Customer Accounts API to store references to uploaded files.

Anchor to LimitationsLimitations

File storage must be implemented separately.
Drag-and-drop doesn't work on mobile.

Was this page helpful?