Upload

Default

Select a single file with the default upload area.

Code copied

<template>
  <s-upload text="Select file" :multiple="false" />
</template>

Multiple

Allow several files and enforce a maximum with limit.

Code copied

<template>
  <s-upload multiple :limit="4" text="Upload images" accept="image/*" />
</template>

Automatic

Upload immediately after selection when action is set.

Code copied

<template>
  <s-upload
    automatic

Advanced

v-model receives selected files. Use before-select-method for app rules and upload-method for a custom request adapter. Existing action upload still works.

API

Code copied

<template>
  <s-upload
    v-model="files"
    multiple
    auto-submit
    mode="image"
    :limit-count="3"
    :limit-size="2"
    :file-types="['image/png', 'image/jpeg']"
    show-tip
    tip-text="PNG/JPG only, up to 2 MB each."
    :before-select-method="beforeSelect"
    :upload-method="uploadMethod"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const files = ref<File[]>([])

const beforeSelect = ({ file }: { file: File }) =>
  file.type.startsWith('image/')

const uploadMethod = async ({
  updateProgress,
}: {
  updateProgress: (percent: number) => void
}) => {
  updateProgress(40)
  await new Promise((resolve) => setTimeout(resolve, 350))