Input File

Base file-input form.

Usage

Simple Usage

preview

<template>
  <p-input-file multiple />
</template>

Sizing

There are 4 size variants that can be use: xs, sm, md, lg. default is md.

preview

<template>
  <p-input-file size="xs" />
  <p-input-file size="sm" />
  <p-input-file size="md" />
  <p-input-file size="lg" />
</template>

Disabled State

preview

<template>
  <p-input-file disabled />
</template>

Readonly State

preview

<template>
  <p-input-file readonly />
</template>

Error State

preview

<template>
  <p-input-file error />
</template>

Clearable

preview

<template>
  <p-input-file clearable />
</template>

Multiple upload

Add prop multiple to enable multi-selected upload.

preview

<template>
  <p-input-file multiple />
</template>

Appending values

Inherit from Dropzone, when user selecting the files, and then selecting again, the old list of files is replaced with new ones. Set multiple prop to 'append' if you want to keep the last ones.

preview

<template>
  <p-input-file multiple="append" />
</template>

Binding v-model

preview

result:

<template>
  <p-input-file v-model="result" />
</template>

Encode to base64

By default, this component keep v-model value as File object. If you need base64-dataURI format, you can add modifier base64 to your v-model.

preview

result:

<template>
  <p-input-file v-model.base64="result" />
</template>

API

Props

Props	Type	Default	Description
size	String	md	Input size, valid value: xs, sm, md, lg
disabled	Boolean	false	Disabled state
readonly	Boolean	false	Readonly state
error	Boolean	false	Error state
multiple	Boolean, String	false	Enable multiple mode, set to append to appening values
maxlength	Number	-	Maxlength selected files, only work on multiple mode
accept	String	-	Limitting file type can be selected, see HTML attribute: accept
clearOnCanel	Boolean	false	Clear v-model when user cancel the browse file
clearable	Boolean	false	Enable clear button
modelValue	File	-	v-model value

Slots

Name	Description
append	Content to place icon inside of append input field

Events

Name	Arguments	Description
change	Files	Event when value changed
cancel	-	Event when user cancel selecting file

See Also

• Input
• Input Group
• Dropzone