Feedback Laraform is now in maintenance mode. Read more on our GitHub.

Gallery Element

An element used to upload multiple images.

#Examples

#Options

Name Type Description
storeFile string The name of child element which should contain the size of the image. Storing size, original name, extension, mime and defining fields is only possible if this one is set.
fileRules str|arr Validation rules to be applied for the image element when using storeFile.
storeSize string The name of child element which should contain the size of the image.
storeOriginalName string The name of child element which should contain the original name of the image.
storeExtension string The name of child element which should contain the extension of the image.
storeMime string The name of child element which should contain the mime type of the image.
fields object Additional elements for each image. General schema rules apply.
drop boolean Whether the uploader should be a drag n drop area instead of a button.
sort boolean Whether the files can be sorted by drag n drop.
storeOrder string The name of the field which should contain the order of the files.
order string The default order direction of image list when data is loaded. Possible values: null, 'ASC', 'DESC'.
orderBy string The image list will be ordered by this element's values.
disabled boolean Whether the field is disabled.

#Properties

Name Type Default Description
children$ object {} Child components.
disabled boolean false Whether the field is disabled.
sort boolean false Whether the list items can be sorted by drag n drop.
storeOrder string null The name of the element which should contain the order of the list item in case of an object list.
order string null The default order direction of list items when data is loaded. Possible values: null, 'ASC', 'DESC'.
orderBy string null When using an object list the list items will be ordered by this element's values. If storeOrder is defined, orderBy will be equal to that unless specified otherwise.
instances array [] Child instances.
drop boolean false Determines if the element has drag n drop area instead of upload button.
lightbox$ object null Lightbox component which appears when an image is clicked.
prototype object - The schema of a child.

#Methods

# .reset()

Resets the element to it's default state.


# .disable()

Disabled the field.


# .enable()

Enables the field.


# .add(data) @returns {number}

Parameters
  • data data : Javascript file object

Adds a file to the file list. Returns the index of the added file.


# .remove(index)

Parameters
  • index index : index of child to be removed.

Removes a child by its index.


#Slots

# preview

Props
  • el$ object : The file's element component.
  • remove function : Removes the image.
  • preview function : Opens image preview.

Custom preview for file.


# children

Props
  • el$ object : The element component.

Contains the children of the element.


#Events

# add(indexes)

Parameters
  • indexes array : index(es) of added list items.

Triggered when the user adds a new list item or .add() method is invoked.


# remove(index)

Parameters
  • index number : index of child to be removed.

Triggered when the user removes a list item or .remove() method is invoked.


# sort(indexes)

Parameters
  • indexes object : an object containing newIndex and oldIndex.

Triggered when the user changes the order of the list items.