Input File ​

Base file-input form.

Usage ​

Simple Usage ​

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

Sizing ​

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

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

Disabled State ​

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

Readonly State ​

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

Error State ​

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

Clearable ​

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

Multiple upload ​

Add prop multiple to enable multi-selected upload.

<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.

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

Binding v-model ​

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.

result:

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

API ​

Props ​

Slots ​

Events ​

See Also ​

• Input
• Input Group
• Dropzone