File Element

An element used to upload a single file.

Examples
Options
Properties
Methods
Slots
Events

#Examples

Basic Usage

Renders a file uploader.

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

Drag n Drop

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

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

Custom Preview

Renders a file uploader with custom preview using preview slot.

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

Restricted Type & Size

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

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

#Options

Name	Type	Description
clickable	`boolean`	Whether the file's name in the default preview should be linked to the actual file.
url	`string`	If the file is `clickable` this will be prepended to the file's URI.
drop	`boolean`	Whether the uploader should be a drag n drop area instead of a button.
disabled	`boolean`	Whether the field is disabled.

#Properties

Name	Type	Default	Description
drop	`boolean`	`false`	Determines if the element has drag n drop area instead of upload button.
disabled	`boolean`	`false`	Whether the field is disabled.
file	`object`	`null`	The element's File object containing information about the uploaded file. Available properties: file, base64, preview, name, displayName, link.
clickable	`boolean`	`true`	Whether the file's name in the default preview should be linked to the actual file.
url	`boolean`	`null`	If the file is `clickable` this will be prepended to the file's URI.
defaultValue	`string`	`null`	Value of element when the form is initially loaded or reseted.
originalName	`string`	-	The original name of the uploaded file.

#Methods

# .reset()

Resets the element to it's default state.

# .disable()

Disabled the field.

# .enable()

Enables the field.

# .change(File)

Parameters

File File : Javascript file object

Changes the uploaded file and trigger it's change event.

# .set(File)

Parameters

File object : Javascript File object.

Converts a javascript File object to element's File object and set it as the file property.

# .remove()

Removes the element's File object.

#Slots

# preview

Props

el$ object : The element component.
remove function : Removes the file.

Custom preview.

#Events

# add

Triggered when a new file is selected by the user.

# remove

Triggered when the element's file is removed.