DragAndDrop โ€‹

Used by FileElement and MultifileElement as a drag and drop.

Options โ€‹

Find below the list of options that can use to configure DragAndDrop component. Options can be passed to the component via props.

title โ€‹

  • Type: string
  • Required: true
vue
<DragAndDrop title="Upload file" ... />

The title of the drag and drop.

disabled โ€‹

  • Type: boolean
vue
<DragAndDrop :disabled="true"... />

Disables the drag and drop.

description โ€‹

  • Type: string
  • Required: true
vue
<DragAndDrop title="Drop file or click here to upload" ... />

The description of the drag and drop.

Properties โ€‹

All the data, computed and inject properties of the component.

dragging โ€‹

  • Type: boolean
  • Default: falyse
  • Group: data

Whether the user is currently dragging a file over the drag and drop area.

area โ€‹

  • Type: HTMLElement
  • Default: null
  • Group: data

The DOM element of the drag and drop area.

Size โ€‹

  • Type: string
  • Group: inject

The size of the component.

View โ€‹

  • Type: string
  • Group: computed

The name of the resolved view for the component. This one should be used to determine the component's view in class functions.

template โ€‹

  • Type: object
  • Group: computed

The component's template.

classes โ€‹

  • Type: object
  • Group: computed

The component's classes.

theme โ€‹

  • Type: object
  • Group: inject

The global theme object, which contains all the default templates and classes.

form$ โ€‹

  • Type: Vueform
  • Group: inject

The root form's component.

el$ โ€‹

  • Type: VueformElement
  • Group: inject

The parent element's component.

Events โ€‹

Events emitted by the component.

click โ€‹

Triggered when the drag and drop area is clicked.

drop โ€‹

  • Params:
    • {Event} event - the drop Event

Triggered when a file is dropped.

๐Ÿ‘‹ Hire Vueform team for form customizations and developmentLearn more