MultifileElement
A form demonstrating usage of the MultifileElement field within Laravel VueForm. Documentation
🧱 Import Class
use VueFormLaravel\Abstracts\VueFormBuilder;
use VueFormLaravel\Elements\Fields\MultifileElement;
use VueFormLaravel\Elements\Vueform;
🧩 Example
class MultifileElementForm extends VueFormBuilder
{
protected function buildForm()
{
return Vueform::build()
->schema([
MultifileElement::name('foo')
]);
}
}
⚙️ Allowed Attributes
| Name | Data Type | Default | Example |
|---|---|---|---|
| accept | string|array |
null | MultifileElement::name("name")->accept() |
| addClass | array|object|string|function |
null | MultifileElement::name("name")->addClass() |
| addClasses | object|function |
{} | MultifileElement::name("name")->addClasses() |
| after | object|string|number |
null | MultifileElement::name("name")->after() |
| auto | boolean |
true | MultifileElement::name("name")->auto() |
| before | object|string|number |
null | MultifileElement::name("name")->before() |
| between | object|string|number |
null | MultifileElement::name("name")->between() |
| clickable | boolean |
true | MultifileElement::name("name")->clickable() |
| columns | object|string|number |
null | MultifileElement::name("name")->columns() |
| conditions | array |
[] | MultifileElement::name("name")->conditions() |
| controls | object |
{ "add": true, "remove": true, "sort": true} | MultifileElement::name("name")->controls() |
| default | array |
[] | MultifileElement::name("name")->default() |
| description | string|object |
null | MultifileElement::name("name")->description() |
| disabled | boolean|function|array|object |
false | MultifileElement::name("name")->disabled() |
| displayErrors | boolean |
true | MultifileElement::name("name")->displayErrors() |
| drop | boolean |
false | MultifileElement::name("name")->drop() |
| fieldName | string|object |
name | label |
| fields | object |
{} | MultifileElement::name("name")->fields() |
| file | object |
{} | MultifileElement::name("name")->file() |
| formatData | function |
null | MultifileElement::name("name")->formatData() |
| formatLoad | function |
null | MultifileElement::name("name")->formatLoad() |
| id | string |
null | MultifileElement::name("name")->id() |
| info | string|object |
null | MultifileElement::name("name")->info() |
| infoPosition | string |
right | MultifileElement::name("name")->infoPosition() |
| inline | boolean |
false | MultifileElement::name("name")->inline() |
| label | string|object|function |
null | MultifileElement::name("name")->label() |
| messages | object |
{} | MultifileElement::name("name")->messages() |
| name | string|number |
undefined | MultifileElement::name("name")->name() |
| object | boolean |
null | MultifileElement::name("name")->object() |
| order | string |
null | MultifileElement::name("name")->order() |
| orderBy | string |
null | MultifileElement::name("name")->orderBy() |
| overrideClass | array|object|string|function |
null | MultifileElement::name("name")->overrideClass() |
| overrideClasses | object|function |
{} | MultifileElement::name("name")->overrideClasses() |
| params | object |
{} | MultifileElement::name("name")->params() |
| presets | array |
[] | MultifileElement::name("name")->presets() |
| previewUrl | string |
undefined | MultifileElement::name("name")->previewUrl() |
| removeClass | array|object|function |
null | MultifileElement::name("name")->removeClass() |
| removeClasses | object|function |
{} | MultifileElement::name("name")->removeClasses() |
| removeEndpoint | object|string|function|boolean|promise |
config.endpoints.removeFile | MultifileElement::name("name")->removeEndpoint() |
| removeTempEndpoint | object|string|function|boolean|promise |
config.endpoints.removeTempFile | MultifileElement::name("name")->removeTempEndpoint() |
| replaceClass | object|function |
null | MultifileElement::name("name")->replaceClass() |
| replaceClasses | object|function |
{} | MultifileElement::name("name")->replaceClasses() |
| rules | array|string|object |
null | MultifileElement::name("name")->rules() |
| size | string |
undefined | MultifileElement::name("name")->size() |
| slots | object |
{} | MultifileElement::name("name")->slots() |
| softRemove | boolean |
false | MultifileElement::name("name")->softRemove() |
| sort | boolean |
false | MultifileElement::name("name")->sort() |
| storeFile | string |
file | MultifileElement::name("name")->storeFile() |
| storeOrder | string |
null | MultifileElement::name("name")->storeOrder() |
| submit | boolean |
true | MultifileElement::name("name")->submit() |
| templates | object |
{} | MultifileElement::name("name")->templates() |
| uploadTempEndpoint | object|string|function|boolean|promise |
config.endpoints.uploadTempFile | MultifileElement::name("name")->uploadTempEndpoint() |
| url | string|boolean |
/ | MultifileElement::name("name")->url() |
| view | string |
file | MultifileElement::name("name")->view() |
| views | object |
{} | MultifileElement::name("name")->views() |
⚡ Events
The following events Documentation are available for this element:
| Name | Parameters | Description |
|---|---|---|
reset |
- {component} el$ - the element's component | Triggered when the input is resetted. |
clear |
- {component} el$ - the element's component | Triggered when the input is cleared. |
change |
- {string} newValue - the new value - {string} oldValue - the old value - {component} el$ - the element's component |
Triggered when the element's value is changed. |
add |
- {number} index - the index of the added item - {File |
object |
remove |
- {number} index - the index of the removed item - {array} value - the element's value after the item is removed - {component} el$ - the element's component |
Triggered when an item is removed from the list. |
sort |
- {array} value - the element's value after sorting - {number} oldIndex - the old index of the moved element - {number} newIndex - the new index of the moved element - {component} el$ - the moved element's component |
Triggered when items are being sorted by the user, when sort: true. |
beforeCreate |
- {component} el$ - the element's component | Triggered in beforeCreate hook. |
created |
- {component} el$ - the element's component | Triggered in created hook. |
beforeMount |
- {component} el$ - the element's component | Triggered in beforeMount hook. |
mounted |
- {component} el$ - the element's component | Triggered in mounted hook. |
beforeUpdate |
- {component} el$ - the element's component | Triggered in beforeUpdate hook. |
updated |
- {component} el$ - the element's component | Triggered in updated hook. |
beforeUnmount |
- {component} el$ - the element's component | Triggered in beforeUnmount (or beforeDestroy in Vue 2) hook. |
unmounted |
- {component} el$ - the element's component | Triggered in unmounted (or destroyed in Vue 2) hook. |
🔔 Example Usage of PHP
MultifileElement::name('example')
->events([
'reset' => 'handleReset',
'clear' => 'handleClear',
'change' => 'handleChange',
'add' => 'handleAdd',
'remove' => 'handleRemove',
'sort' => 'handleSort',
'beforeCreate' => 'handleBeforeCreate',
'created' => 'handleCreated',
'beforeMount' => 'handleBeforeMount',
'mounted' => 'handleMounted',
'beforeUpdate' => 'handleBeforeUpdate',
'updated' => 'handleUpdated',
'beforeUnmount' => 'handleBeforeUnmount',
'unmounted' => 'handleUnmounted',
])
🔔 Example Usage of JavaScript
function handleReset(el$) {
// Your code here
}
function handleClear(el$) {
// Your code here
}
function handleChange(newValue, oldValue, el$) {
// Your code here
}
function handleAdd({number} index, {File|object|string} addedValue, value, el$) {
// Your code here
}
function handleRemove({number} index, value, el$) {
// Your code here
}
function handleSort(value, {number} oldIndex, {number} newIndex, el$) {
// Your code here
}
function handleBeforeCreate(el$) {
// Your code here
}
function handleCreated(el$) {
// Your code here
}
function handleBeforeMount(el$) {
// Your code here
}
function handleMounted(el$) {
// Your code here
}
function handleBeforeUpdate(el$) {
// Your code here
}
function handleUpdated(el$) {
// Your code here
}
function handleBeforeUnmount(el$) {
// Your code here
}
function handleUnmounted(el$) {
// Your code here
}