--- title: DropZone description: >- Let buyers upload files through drag-and-drop or by clicking to browse, such as images, documents, or CSV imports. api_version: 2025-07 source_url: html: >- https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/ui-components/forms/dropzone md: >- https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/ui-components/forms/dropzone.md api_name: checkout-ui-extensions --- 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/checkout-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/checkout/migrate-to-web-components) to upgrade your extension. # DropZone The DropZone component allows file uploads through drag-and-drop functionality into a designated area on a page, or by activating a button. At present, the DropZone component does not offer image upload preview capabilities. The use of object URLs directly in an image component is not possible due to the extension and host operating on separate domains. Any element focused within the DropZone 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 (50) ### Supported targets * Checkout::Actions::Render​Before * Checkout::Cart​Line​Details::Render​After * Checkout::Cart​Lines::Render​After * Checkout::Contact::Render​After * Checkout::Customer​Information::Render​After * Checkout::Delivery​Address::Render​Before * Checkout::Dynamic::Render * Checkout::Pickup​Locations::Render​After * Checkout::Pickup​Locations::Render​Before * Checkout::Pickup​Points::Render​After * Checkout::Pickup​Points::Render​Before * Checkout::Reductions::Render​After * Checkout::Reductions::Render​Before * Checkout::Shipping​Method​Details::Render​After * Checkout::Shipping​Method​Details::Render​Expanded * Checkout::Shipping​Methods::Render​After * Checkout::Shipping​Methods::Render​Before * Checkout::Thank​You::Cart​Line​Details::Render​After * Checkout::Thank​You::Cart​Lines::Render​After * Checkout::Thank​You::Customer​Information::Render​After * Checkout::Thank​You::Dynamic::Render * [purchase.​checkout.​actions.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/targets/checkout/navigation#navigation-target) * [purchase.​checkout.​block.​render](https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/targets/checkout/block#block-target) * [purchase.​checkout.​cart-line-item.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/targets/checkout/order-summary#line-item-targets) * [purchase.​checkout.​cart-line-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/targets/checkout/order-summary#checkout-cart-line-list-) * [purchase.​checkout.​contact.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/targets/checkout/information#information-target) * [purchase.​checkout.​delivery-address.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/targets/checkout/shipping#render-after-delivery-address-) * [purchase.​checkout.​delivery-address.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/targets/checkout/shipping#delivery-address-targets) * [purchase.​checkout.​footer.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/targets/checkout/footer#footer-target) * [purchase.​checkout.​header.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/targets/checkout/header#header-target) * [purchase.​checkout.​payment-method-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/targets/checkout/payment#render-after-payment-methods-) * [purchase.​checkout.​payment-method-list.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/targets/checkout/payment#payment-targets) * [purchase.​checkout.​pickup-location-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/targets/checkout/local-pickup#render-after-pickup-locations-) * [purchase.​checkout.​pickup-location-list.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/targets/checkout/local-pickup#location-list-targets) * [purchase.​checkout.​pickup-location-option-item.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/targets/checkout/local-pickup#location-option-item-target) * [purchase.​checkout.​pickup-point-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/targets/checkout/pickup-points#render-after-pickup-points-) * [purchase.​checkout.​pickup-point-list.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/targets/checkout/pickup-points#pickup-points-targets) * [purchase.​checkout.​reductions.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/targets/checkout/order-summary#checkout-reductions-after-) * [purchase.​checkout.​reductions.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/targets/checkout/order-summary#reductions-targets) * [purchase.​checkout.​shipping-option-item.​details.​render](https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/targets/checkout/shipping#shipping-option-item-targets) * [purchase.​checkout.​shipping-option-item.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/targets/checkout/shipping#render-after-shipping-option-) * [purchase.​checkout.​shipping-option-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/targets/checkout/shipping#render-after-shipping-options-) * [purchase.​checkout.​shipping-option-list.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/targets/checkout/shipping#shipping-option-list-targets) * [purchase.​thank-you.​announcement.​render](https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/targets/thank-you/announcement#thank-you-announcement-) * [purchase.​thank-you.​block.​render](https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/targets/thank-you/block#block-target) * [purchase.​thank-you.​cart-line-item.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/targets/thank-you/order-summary#line-item-targets) * [purchase.​thank-you.​cart-line-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/targets/thank-you/order-summary#thank-you-cart-line-list-) * [purchase.​thank-you.​customer-information.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/targets/thank-you/information#information-target) * [purchase.​thank-you.​footer.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/targets/thank-you/footer#footer-target) * [purchase.​thank-you.​header.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/targets/thank-you/header#header-target) *** ## Drop​Zone​Props * **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 ### Drop​Zone ## DropZone ![An image showcasing the DropZone component with a button to add files with error and dragged over states.](https://shopify.dev/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/dropzone-preview-Rq6SjGDf.png) ## DropZone ##### React ```tsx import { reactExtension, DropZone, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.block.render', () => , ); function Extension() { return ; } ``` ##### JS ```js import {DropZone, extension} from '@shopify/ui-extensions/checkout'; export default extension('purchase.checkout.block.render', (root) => { const dropZone = root.createComponent(DropZone, { accept: 'image/*', }); root.appendChild(dropZone); }); ``` *** ## Best practices * **Restrict accepted file types**: Use the `accept` property to limit file uploads to valid formats like `image/*` or `application/pdf`. * **Set a minimum size**: Keep the drop zone to at least 100px by 100px to prevent truncated text and spacing issues. * **Handle rejected files**: Use the `onDropRejected` callback to display clear error messages when files don't match the accepted type. * **Include a click-to-browse option**: Drag and drop doesn't work on mobile devices. Include an option to select files manually. *** ## Limitations * File storage must be implemented separately. Use metafields through the [Metafields API](https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/apis/metafields) to store references to uploaded files. ***