Multifile Element

An element used to upload multiple files.

Examples
Options
Properties
Methods
Slots
Events

#Examples

Basic Usage

Renders a multifile uploader.

          
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        multifile: {
          type: 'multifile'
        }
      }
    })
  }
</script>

Drag n Drop

Renders a multifile uploader with drag n drop area using drop option.

          
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        multifile: {
          type: 'multifile',
          drop: true
        }
      }
    })
  }
</script>

Form `data`:

Sorting

Allows to sort files using sort option.

          
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        multifile: {
          type: 'multifile',
          sort: true,
          storeFile: 'file',
          storeOrder: 'order',
          fields: {
            order: {
              type: 'meta'
            }
          }
        }
      }
    }),
  }
</script>

Restricted Type & Size

Restricts accepted files to png and size to max 1024 kB.

          
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        multifile: {
          type: 'multifile',
          fileRules: 'file|mimes:png|max:1024'
        }
      }
    })
  }
</script>

Custom Preview

The files have custom preview using preview slot.

          
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        multifile: {
          type: 'multifile',
          slots: {
            preview: Vue.extend({
              props: ['el$', 'remove'],
              template: `
              <div>
                {{ el$.file.name }} 
                <a href="" @click.prevent="remove">Remove</a>
              </div>
              `
            })
          }
        }
      }
    })
  }
</script>

#Options

Name	Type	Description
storeFile	`string`	The name of child element which should contain the size of the file. Storing size, original name, extension, mime and defining fields is only possible if this one is set and the element's value will be a list of objects instead of a list of filenames.
fileRules	`str\|arr`	Validation rules to be applied for the file element when using `storeFile`.
storeSize	`string`	The name of child element which should contain the size of the file.
storeOriginalName	`string`	The name of child element which should contain the original name of the file.
storeExtension	`string`	The name of child element which should contain the extension of the file.
storeMime	`string`	The name of child element which should contain the mime type of the file.
fields	`object`	Additional elements for each file. 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 file list when data is loaded. Possible values: `null`, `'ASC'`, `'DESC'`.
orderBy	`string`	The file 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.
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 file.

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.