Sefirot

Appearance

SInputFileUpload ​

<SInputFileUpload> is a multiple file select component. It has more advanced features compared to <SInputFile> such as listing selected files individually, removing selected files, and more.

@globalbrain/sefirot/lib/components/SInputFileUpload.vue

No file selected

0 files

0.00B

Import ​

ts
import SInputFileUpload from '@globalbrain/sefirot/lib/components/SInputFileUpload.vue'

Usage ​

Import <SInputFileUpload> and pass in value as either v-model or :value. The value should be an array of File objects.

vue
<script setup lang="ts">
import { ref } from 'vue'
import SInputFile from '@globalbrain/sefirot/lib/components/SInputFile.vue'

const input = ref<File[]>([])
</script>

<template>
  <SInputFileUpload v-model="input" />
</template>

Props ​

ts
interface Props {
  size?: Size
  label?: string
  info?: string
  note?: string
  help?: string
  text?: string
  placeholder?: string
  emptyText?: string
  accept?: string
  multiple?: boolean
  checkIcon?: Component
  checkText?: string
  checkColor?: Color
  value?: File[]
  modelValue?: File[]
  hideError?: boolean
  validation?: Validatable
}

type Size =
  | 'mini'
  | 'small'
  | 'medium'

type Color =
  | 'neutral'
  | 'mute'
  | 'info'
  | 'success'
  | 'warning'
  | 'danger'

:size ​

Defines the size of the input. This only affects the size of the label. The default is 'small'.

ts
interface Props {
  size?: 'mini' | 'small' | 'medium'
}
template
<SInputFileUpload size="small" v-model="..." />

:label ​

Defines the label text of the input.

ts
interface Props {
  label?: string
}
template
<SInputFileUpload label="Upload file" v-model="..." />

:info ​

Shows help icon after the label and shows info in a tooltip when the user hovers the label.

ts
interface Props {
  info?: string
}
template
<SInputFileUpload
  label="Upload image"
  info="The files will be uploaded to the server."
  v-model="..."
/>

:note ​

Adds small help text after the label. Best used along with :label.

ts
interface Props {
  note?: string
}
template
<SInputFileUpload
  label="Upload file"
  note="Optional"
  v-model="..."
/>

:help ​

Adds small help text to the bottom of the input.

ts
interface Props {
  help?: string
}
template
<SInputFileUpload
  label="Upload file"
  help="Accepts only JPG and PNG."
  v-model="..."
/>

:text ​

Defines the text of the button. Defaults to 'Choose File'.

ts
interface Props {
  text?: string
}
template
<SInputFileUpload text="Select File" v-model="..." />

:placeholder ​

Defines the placeholder text to show right next to file select button. Use this space to describe main validation rules, such as file size limit.

ts
interface Props {
  placeholder?: string
}
template
<SInputFileUpload
  placeholder="Total 10MB max."
  v-model="..."
/>

:accept ​

Defines the file types to accept.

ts
interface Props {
  accept?: string
}
template
<SInputFileUpload accept="image/*" v-model="..." />

:check-icon ​

Icon to display at corner right of label. Useful to show the status of a particular input.

ts
interface Props {
  checkIcon?: Component
}
template
<SInputFileUpload :check-icon="IconCheckCircle" />

:check-text ​

Text to display alongside check-icon.

ts
interface Props {
  checkText?: string
}
template
<SInputFileUpload :check-text="Saved" />

:check-color ​

Defines the color of :check-icon and :check-text. The default is 'neutral'.

ts
interface Props {
  checkColor?: Color
}

type Color =
  | 'neutral' 
  | 'mute' 
  | 'info' 
  | 'success' 
  | 'warning' 
  | 'danger'
template
<SInputFileUpload
  :check-icon="IconCheckCircle"
  check-text="Uploaded"
  check-color="success"
/>

:value ​

Sets the input value. When :model-value is set (e.g. via v-model directive), this prop is ignored.

ts
interface Props {
  value?: File[]
}
template
<SInputFileUpload :value="file" />

:model-value ​

The v-model binding for the input.

ts
interface Props {
  modelValue?: File[]
}
template
<SInputFileUpload v-model="file" />

:validation ​

The validation object for the input. It accepts Vuelidate like validation object and displays error if there're any.

ts
import { Ref } from 'vue'

interface Props {
  validation?: Validatable
}

interface Validatable {
  readonly $dirty: boolean
  readonly $invalid: boolean
  readonly $errors: ValidatableError[]
  readonly $touch: () => void
}

interface ValidatableError {
  readonly $message: string | Ref<string>
}
template
<SInputFileUpload
  v-model="file"
  :validation
/>

:hide-error ​

Stop showing validation error message even when there are errors. This prop will not prevent the error color from appearing.

ts
interface Props {
  hideError?: boolean
}
template
<SInputFileUpload
  v-model="file"
  :validation
  hide-error
/>

Slots ​

Here are the list of slots you may define within the component.

#info ​

Same as :info prop. When both :info and this slot are defined, this slot will take precedence.

template
<SInputFileUpload label="Upload image" v-model="...">
  <template #info>
    Learn more about this field <SLink href="...">here</SLink>.
  </template>
</SInputFile>

Events ​

ts
interface Emits {
  'update:model-value': [files: File[]]
  'change': [files: File[]]
}

@update:model-value ​

Emits when the user selects the item. This event is always emitted together with the @change event.

ts
interface Emits {
  'update:model-value': [files: File[]]
}

@change ​

Emits when the user selects the item. This event is always emitted together with the @update:model-value event.

ts
interface Emits {
  change: [files: File[]]
}