Upload

Driven by a native <input type="file"> plus a drop zone. The request is provided by the consumer via the request prop (the library has zero runtime dependencies and ships no HTTP client).

Basic usage

Basic

Select file

<script setup lang="ts">
</script>

<template>
  <LhUpload :max-size="1048576" :accept="['.png', '.jpg']" />
</template>

<script>
export default {}
</script>

<template>
  <LhUpload :max-size="1048576" :accept="['.png', '.jpg']" />
</template>

accept also accepts a comma-separated string (e.g. accept=".png,.jpg", handy as a static attribute).

Drag and custom request

Drag upload

Drop files here or click to upload

<script setup>
const fakeRequest = ({ file, onProgress }) =>
  new Promise((resolve) => {
    let percent = 0
    const timer = setInterval(() => {
      percent += 20
      onProgress(percent)
      if (percent >= 100) {
        clearInterval(timer)
        resolve({ url: `https://example.com/${file.name}` })
      }
    }, 200)
  })
</script>

<template>
  <!-- Drag upload -->
  <LhUpload drag :multiple="true" :request="fakeRequest" />
</template>

<script>
export default {
  methods: {
    fakeRequest({ file, onProgress }) {
      return new Promise((resolve) => {
        let percent = 0
        const timer = setInterval(() => {
          percent += 20
          onProgress(percent)
          if (percent >= 100) {
            clearInterval(timer)
            resolve({ url: `https://example.com/${file.name}` })
          }
        }, 200)
      })
    },
  },
}
</script>

<template>
  <!-- Drag upload -->
  <LhUpload drag :multiple="true" :request="fakeRequest" />
</template>

Disabled and file count limit

disabled disables uploading; max-count limits the maximum number of files.

Disabled / max count

Select file

Select file

<script setup lang="ts">
</script>

<template>
  <LhUpload disabled />
  <LhUpload :max-count="2" />
</template>

<script>
export default {}
</script>

<template>
  <LhUpload disabled />
  <LhUpload :max-count="2" />
</template>

API

LhUpload Props

Attribute	Description	Type	Default
multiple	Allow multiple selection	boolean	false
drag	Drop-zone mode	boolean	false
disabled	Disabled	boolean	false
accept	Allowed extensions / MIME, as an array (['.png', 'image/*']) or a comma-separated string ('.png,.jpg')	string | string[]	() => []
maxSize	Per-file size limit (bytes)	number	[LH_UPLOAD_MAX_SIZE](#const-LH_UPLOAD_MAX_SIZE)
maxCount	Count limit (0 = unlimited)	number	0
request	Upload function (local selection and validation only when omitted)	(options: { file: File; onProgress: (percent: number) => void; }) => Promise<{ url?: string; }>	—
sx	Quick layout props	LhSxProps	—

LhUpload Events

Event	Description	Callback
change	Emitted when the file list changes (after adding, upload finished or removal)	(files: LhUploadFile[]) => void
success	Emitted when a single file uploads successfully	(file: LhUploadFile) => void
error	Emitted when a single file fails to upload	(file: LhUploadFile, reason: string) => void
remove	Emitted after a file is removed	(uid: string) => void

Type Definitions

The TypeScript type structures exported by this component (auto-extracted from packages/components/upload/src/types.ts and @lh-ui/share/core/* sources; click each entry to expand; see the Props table above for attribute descriptions):

LhUploadProps

export interface LhUploadProps {
  multiple?: boolean
  drag?: boolean
  disabled?: boolean
  accept?: string[] | string
  maxSize?: number
  maxCount?: number
  request?: LhUploadRequest
  sx?: LhSxProps
}

LhUploadRequest _{(from @lh-ui/share/core/upload)}

export type LhUploadRequest = (options: {
  file: File
  onProgress: (percent: number) => void
}) => Promise<{ url?: string }>

LhUploadFileStatus _{(from @lh-ui/share/core/upload)}

export type LhUploadFileStatus = 'ready' | 'uploading' | 'success' | 'fail'

LhUploadFile _{(from @lh-ui/share/core/upload)}

export interface LhUploadFile {
  uid: string
  name: string
  size: number
  status: LhUploadFileStatus
  percent: number
  url?: string
  error?: string
  raw?: File
}

Constants

Public constants used by this component (linked from the Type / Default columns in the Props table above):

LH_UPLOAD_MAX_SIZE _{(from @lh-ui/share/core/upload)}

export const LH_UPLOAD_MAX_SIZE = 5 * 1024 * 1024