Drop zone

A drop zone allows users to drag and drop files or other content into a designated area.

Property	Values	Default value	Required
accept	yes / no	no	no
size	s / m / l	m
action label	text If undefined, this button does not appear.	-
on drop	text Callback function called when files are dropped onto the drop zone.	-
on drag over	text Callback function called when a file is dragged over the drop zone.	-
on drag leave	text Callback function called when a file is dragged out of the drop zone.	-

{
  "slug": "drop-zone",
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/component.json",
  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/components/drop-zone.json",
  "title": "Drop zone",
  "description": "A drop zone allows users to drag and drop files or other content into a designated area.",
  "meta": {
    "category": "inputs",
    "documentationUrl": "https://spectrum.adobe.com/page/drop-zone/"
  },
  "type": "object",
  "properties": {
    "accept": {
      "type": "array",
      "items": {
        "type": "string",
        "description": "File types that are accepted by the drop zone."
      }
    },
    "size": {
      "type": "string",
      "enum": [
        "s",
        "m",
        "l"
      ],
      "default": "m"
    },
    "actionLabel": {
      "type": "string",
      "description": "If undefined, this button does not appear."
    },
    "onDrop": {
      "type": "string",
      "description": "Callback function called when files are dropped onto the drop zone."
    },
    "onDragOver": {
      "type": "string",
      "description": "Callback function called when a file is dragged over the drop zone."
    },
    "onDragLeave": {
      "type": "string",
      "description": "Callback function called when a file is dragged out of the drop zone."
    }
  }
}