Skip to content
On this page

Input File

Base file-input form.

Usage

Simple Usage

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

Sizing

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

preview
vue
<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
vue
<template>
  <p-input-file disabled />
</template>

Readonly State

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

Error State

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

Clearable

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

Multiple upload

Add prop multiple to enable multi-selected upload.

preview
vue
<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
vue
<template>
  <p-input-file multiple="append" />
</template>

Binding v-model

preview

result:

vue
<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:

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

API

Props

PropsTypeDefaultDescription
sizeStringmdInput size, valid value: xs, sm, md, lg
disabledBooleanfalseDisabled state
readonlyBooleanfalseReadonly state
errorBooleanfalseError state
multipleBoolean, StringfalseEnable multiple mode, set to append to appening values
maxlengthNumber-Maxlength selected files, only work on multiple mode
acceptString-Limitting file type can be selected, see HTML attribute: accept
clearOnCanelBooleanfalseClear v-model when user cancel the browse file
clearableBooleanfalseEnable clear button
modelValueFile-v-model value

Slots

NameDescription
defaultContent to place for dropzone

Events

NameArgumentsDescription
changeFilesEvent when value changed
cancel-Event when user cancel selecting file

See Also

Released under the MIT License.