Choose a version:

DropZone

DropZone allows file uploads through drag-and-drop functionality into a designated area on a page, or by activating a button. At present, DropZone 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.

Anchor to dropzonepropsDropZoneProps

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 (e.g. .jpg, .pdf, .doc)

A valid MIME type string with no extensions

If left empty, the dropzone will accept all files.
Anchor to accessibilityLabel accessibilityLabel string: A label that describes the purpose or contents of the item. When set, it will be announced to buyers using assistive technologies and will provide them with more context.
Anchor to disabled disabled boolean: Whether the field can be modified.
Anchor to error error string: Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately.
Anchor to id id string: A unique identifier for the component.
Anchor to label label string: Content to use as the field label.
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: Callback when rejected files are dropped. Files are rejected based on the accept prop.
Anchor to onInput onInput (files: File[]) => void: Callback when files are dropped or selected.
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.

DropZoneProps

accept
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 (e.g. .jpg, .pdf, .doc) - A valid MIME type string with no extensions If left empty, the dropzone will accept all files.
```
string
```
accessibilityLabel
A label that describes the purpose or contents of the item. When set, it will be announced to buyers using assistive technologies and will provide them with more context.
```
string
```
disabled
Whether the field can be modified.
```
boolean
```
error
Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately.
```
string
```
id
A unique identifier for the component.
```
string
```
label
Content to use as the field label.
```
string
```
multiple
Defines if the user can select or drop multiple files at once.
```
boolean
```
name
An identifier for the field that is unique within the nearest containing `Form` component.
```
string
```
onDropRejected
Callback when rejected files are dropped. Files are rejected based on the `accept` prop.
```
(files: File[]) => void
```
onInput
Callback when files are dropped or selected.
```
(files: File[]) => void
```
required
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.
```
boolean
```

export interface DropZoneProps extends IdProps {
  /**
   * Whether the field can be modified.
   */
  disabled?: 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.
   */
  required?: boolean;

  /**
   * Indicate an error to the user. The field will be given a specific stylistic treatment
   * to communicate problems that have to be resolved immediately.
   */
  error?: string;

  /**
   * Content to use as the field label.
   */
  label?: string;

  /**
   * An identifier for the field that is unique within the nearest
   * containing `Form` component.
   */
  name?: 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 (e.g. .jpg, .pdf, .doc)
   * - A valid MIME type string with no extensions
   *
   * If left empty, the dropzone will accept all files.
   *
   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept
   */
  accept?: string;

  /**
   * A label that describes the purpose or contents of the item. When set,
   * it will be announced to buyers using assistive technologies and will
   * provide them with more context.
   */
  accessibilityLabel?: string;

  /**
   * Defines if the user can select or drop multiple files at once.
   *
   * @default false
   */
  multiple?: boolean;

  /**
   * Callback when files are dropped or selected.
   * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/drop_event
   */
  onInput?(files: File[]): void;

  /**
   * Callback when rejected files are dropped. Files are rejected based on the `accept` prop.
   */
  onDropRejected?(files: File[]): void;
}

Was this section helpful?

DropZone

import {

reactExtension,

DropZone,

} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(

'purchase.checkout.block.render',

() => <Extension />,

);

function Extension() {

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

}

examples

DropZone

React

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

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

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

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

Preview

An image showcasing the DropZone component with a button to add files with error and dragged over states.

Anchor to best-practicesBest Practices

File storage

File storage for uploads must be implemented separately. Metafields and the corresponding Checkout API or Customer Accounts API can be utilized to store references to files alongside the relevant objects.

Mobile

Remember that the drag and drop feature won’t be effective on mobile devices. Adding a button can offer additional context and guide users through the next steps.

Minimum size

To prevent cut-off text and spacing issues, the minimum size of a Dropzone should be 100px by 100px.

Was this section helpful?