--- title: DropZone description: >- The drop zone component lets customers upload files through drag-and-drop or by clicking to browse. api_version: 2025-07 api_name: customer-account-ui-extensions source_url: html: >- https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/dropzone md: >- https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/dropzone.md --- Migrate to Polaris Version 2025-07 is the last API version to support React-based UI components. Later versions use [web components](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/polaris-web-components), native UI elements with built-in accessibility, better performance, and consistent styling with [Shopify's design system](https://shopify.dev/docs/apps/design). Check out the [migration guide](https://shopify.dev/docs/apps/build/customer-accounts/migrate-to-web-components) to upgrade your extension. # 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 * Customer​Account::Kitchen​Sink * [customer-account.​footer.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/footer#footer-render-after-) * [customer-account.​order-index.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-index#order-index-targets) * [customer-account.​order-index.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-index#order-index-block-) * [customer-account.​order-status.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#order-status-announcement-) * [customer-account.​order-status.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#order-status-block-) * [customer-account.​order-status.​cart-line-item.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#cart-line-item-render-after-) * [customer-account.​order-status.​cart-line-list.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#cart-line-list-render-after-) * [customer-account.​order-status.​customer-information.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#customer-information-render-after-) * [customer-account.​order-status.​fulfillment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/fulfillment-status#fulfillment-status-targets) * [customer-account.​order-status.​payment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/payments-and-returns#payments-and-returns-targets) * [customer-account.​order-status.​return-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/payments-and-returns#return-details-render-after-) * [customer-account.​order-status.​unfulfilled-items.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/fulfillment-status#unfulfilled-items-render-after-) * [customer-account.​order.​action.​menu-item.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-actions#order-action-menu-item-) * [customer-account.​order.​action.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-actions#order-action-) * [customer-account.​order.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/full-page#order-specific-full-page-) * [customer-account.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/full-page#customer-account-full-page-) * [customer-account.​profile.​addresses.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-default#profile-page-default-targets-) * [customer-account.​profile.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-default#announcement-) * [customer-account.​profile.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-default#profile-block-) * [customer-account.​profile.​company-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-b2b#profile-page-b2b-targets-) * [customer-account.​profile.​company-location-addresses.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-b2b#company-location-addresses-render-after-) * [customer-account.​profile.​company-location-payment.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-b2b#company-location-payment-render-after-) * [customer-account.​profile.​company-location-staff.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-b2b#company-location-staff-render-after-) * customer-account.​profile.​payment.​render-after #### Use cases * **Image uploads**: Let customers attach photos for returns or profile updates. * **Document submissions**: Collect PDFs or other files as part of a form. * **Multi-file uploads**: Allow customers to upload several files at once. * **Upload validation**: Restrict accepted file types and sizes before uploading. *** ## Properties Configure the following properties on the DropZone component. * **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`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept) attribute. * **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. * **disabled** **boolean** Whether the drop zone is disabled, preventing any user interaction. * **error** **string** An error message displayed below the field to indicate validation problems. When set, the drop zone is styled with error indicators. * **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. * **label** **string** The text displayed as the field label, which identifies the purpose of the drop zone to users. * **multiple** **boolean** **Default: false** Defines if the user can select or drop multiple files at once. * **name** **string** An identifier for the field that is unique within the nearest containing `Form` component. * **onDropRejected** **(files: File\[]) => void** A callback fired when rejected files are dropped. Files are rejected based on the `accept` prop. * **onInput** **(files: File\[]) => void** A callback fired when files are dropped or selected. Learn more about the [`drop`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/drop_event) event. * **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. *** ## Examples ### Upload 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](https://shopify.dev/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/dropzone-preview-Rq6SjGDf.png) ## Upload a file ##### React ```tsx import { reactExtension, DropZone, } from '@shopify/ui-extensions-react/customer-account'; export default reactExtension( 'customer-account.page.render', () => , ); function Extension() { return ; } ``` ##### JS ```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); }); ``` *** ## Best 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](https://shopify.dev/docs/api/customer/latest/mutations/metafieldsSet) to store references to uploaded files. *** ## Limitations * File storage must be implemented separately. * Drag-and-drop doesn't work on mobile. ***