File Upload

Input elements with type "file" let the user choose one or more files from their device storage. Once chosen, the files can be uploaded to a server using form submission.

Examples

Input

Code

<script setup lang="ts">
import { BaseFileUpload } from '@point-hub/papp'

interface HTMLInputEvent extends Event {
  target: HTMLInputElement
}

const onUpload = (e: HTMLInputEvent) => {
  console.log(e.target.files)
}
</script>

<template>
  <component :is="BaseFileUpload" @change="onUpload" />
</template>

Label

Code

<script setup lang="ts">
import { BaseFileUpload } from '@point-hub/papp'

interface HTMLInputEvent extends Event {
  target: HTMLInputElement
}

const onUpload = (e: HTMLInputEvent) => {
  console.log(e.target.files)
}
</script>

<template>
  <component
    :is="BaseFileUpload"
    @change="onUpload"
    label="Label"
    description="Vertical Layout"
    layout="vertical"
  />
  <component
    :is="BaseFileUpload"
    @change="onUpload"
    label="Label"
    description="Horizontal Layout"
    layout="horizontal"
  />
</template>

Helper

Code

<script setup lang="ts">
import { BaseFileUpload } from '@point-hub/papp'
import { ref } from 'vue'

interface HTMLInputEvent extends Event {
  target: HTMLInputElement
}

const onUpload = (e: HTMLInputEvent) => {
  console.log(e.target.files)
}

const errors = ref<string[]>(['Errors'])
</script>

<template>
  <component :is="BaseFileUpload" @change="onUpload" label="Label" required />
  <component
    :is="BaseFileUpload"
    @change="onUpload"
    label="Label"
    description="Description Example"
  />
  <component
      :is="BaseFileUpload"
      @change="onUpload"
      label="Label"
      :helpers="['Helper Example']"
    />
    <component :is="BaseFileUpload" @change="onUpload" label="Label" v-model:errors="errors" />
</template>

Slot

Code

<script setup lang="ts">
import { BaseFileUpload, BaseButton } from '@point-hub/papp'
import { ref } from 'vue'

interface HTMLInputEvent extends Event {
  target: HTMLInputElement
}

const files = ref()
const onUpload = (e: HTMLInputEvent) => {
  files.value = e.target.files
}
</script>

<template>
  <component
    :is="BaseFileUpload"
    @change="onUpload"
    label="Label"
    description="Horizontal Layout"
    layout="horizontal"
  >
    <template v-slot="{ fileRef }">
      <component :is="BaseButton" size="sm" @click="fileRef.click()">
        <base-icon icon="i-far-arrow-up-from-bracket" /> Choose File
      </component>
      <p class="ml-2" v-if="files">
        {{ files.length === 1 ? files[0].name : files.length + ' files' }}
      </p>
      <base-icon v-if="files" icon="i-far-xmark" class="ml-2 btn" @click="() => (files = null)" />
    </template>
  </component>
</template>

File Upload API

Types

export type BaseFileUploadBorderType = 'none' | 'simple' | 'full'
export type BaseFormLayoutType = 'vertical' | 'horizontal'

Props

Name	Type	Default	Description
v-model:errors	string[]		Input error message.
id	string		Input id.
label	string		Input label.
description	string		Input description.
border	BaseFileUploadBorderType	full	Input border.
layout	BaseFormLayoutType	vertical	Input layout.
accept	string		Accept mimetype.
multiple	boolean	false	Upload multiple files.
autofocus	boolean	false	Focus input on page load.
required	boolean	false	if true input is required.
disabled	boolean	false	if true input is disabled.
helpers	string[]		Input helper message.

Slot

#default slot for rendering custom file upload

Event

@change event for choosen file upload