Avatar Element

An element used for profile images.

Examples
- Basic Usage
- Custom Uploader
Options
Properties
Methods
Slots
Events

#Examples

Basic Usage

By default a placeholder image is shown which is replaced by the actual image, once uploaded. Clicking the uploaded image triggers it's larger preview.

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

Custom Uploader

Using custom template for displaying the image placeholder and preview.

          
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        avatar: {
          type: 'avatar',
          slots: {
            preview: Vue.extend({
              props: ['el$', 'add', 'remove', 'preview'],
              template: `
                <a v-if="!el$.file"
                  @click.prevent="add"
                  class="btn btn-primary"
                  href=""
                >
                  Upload Avatar
                </a>

                <div v-else>
                  <a
                    @click.prevent="preview"
                    href=""
                  >
                    <img
                      :src="el$.file.preview"
                      width="120" 
                    />
                  </a><br />
                  <a
                    href="" 
                    @click.prevent="remove"
                  >Remove</a>
                </div>

              `
            })
          }
        }
      }
    })
  }
</script>

#Options

Name	Type	Description
url	`string`	The url to be prepended to the file's URI.
disabled	`boolean`	Whether the field is disabled.

#Properties

Name	Type	Default	Description
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.
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.
lightbox$	`object`	`null`	Lightbox component which appears when the image is clicked.
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.
add function : Adds a new image.
remove function : Removes the image.
preview function : Opens image preview.

Contains the avatar preview.

#Events

# add

Triggered when a new file is selected by the user.

# remove

Triggered when the element's file is removed.