Image Element

An element used to upload a single image.

Examples
Options
Properties
Methods
Slots
Events

#Examples

Basic Usage

Renders an image uploader.

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

List View

Renders images in a list using view 'list' option.

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

Drag n Drop

Renders an image uploader with drag n drop area using drop option.

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

Custom Preview

Renders an image uploader with custom preview using preview slot.

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

Restricted Type & Size

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

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

#Options

Name	Type	Description
view	`string`	View type of the image's preview. Possible values: `gallery` or `list`.
clickable	`boolean`	Whether the image's name in the list view should be linked to the actual file.
url	`string`	The url to 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.
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.
remove function : Removes the image.
preview function : Opens image preview.

Custom preview.

#Events

# add

Triggered when a new file is selected by the user.

# remove

Triggered when the element's file is removed.