SwUploadFile

SwUploadFile is a chunked upload component for plain files (PDF / documents / zip — anything that isn't an image or video), supporting both click-to-select and drag-and-drop. It is the unstyled UI shell over the useUploader().uploadFile capability: it reuses the same chunked endpoint as SwUploadVideo, but without the transcoding step (no queryFn needed) — the chunk-success response already carries an accessible URL, so uploadFn resolves the result directly.

Use SwUploadImage for images, SwUploadVideo for videos, and this component for everything else. All three are unstyled: they render no UI of their own, inject upload logic via uploadFn, and expose state through the default slot.

Basic Usage + Progress

Click to select a file; the progress scope variable and progress event reflect chunked upload progress in real time.

<script setup lang="ts">
const uploader = useUploader()

function onDone(result: { id: string; value: string }) {
  form.attachment = { id: result.id, url: result.value }
}
</script>

<template>
  <SwUploadFile :upload-fn="uploader.uploadFile" @success="onDone" v-slot="{ open, pending, progress }">
    <SwButton :disabled="pending" @click="open">
      {{ pending ? `Uploading ${progress}%` : 'Select File' }}
    </SwButton>
  </SwUploadFile>
</template>

Custom trigger area (#default slot)

The "+ upload card": the default slot fully takes over the trigger UI; a clickable download link appears when done.

Drag and Drop

Use the slot's isOver to highlight the drop zone. Plain files are not mime-restricted — any file can be dropped.

Restrict file types (accept)

accept is passed through to the file picker, filtering at the selection level.

Multiple Files

Enable multiple to select or drop several files at once; they upload concurrently and emit success one by one.

Progress trade-off: progress is accurate for single-file uploads; with multiple, per-file progress interleaves (last writer wins), so the progress bar is primarily meaningful for the single-file case.

Props

Type Definitions

FileUploadOptions

interface FileUploadOptions {
  chunkSize?: number
  retries?: number
  concurrency?: number
  onProcess?: (result: ChunkProgress) => void
  onBefore?: (file: File) => void
}

FileUploadResult

type FileUploadResult = {
  id: string // Backend file ID (business-side foreign key)
  value: string // File access URL (same `value` semantics as uploadImage)
  file_md5: string // Whole-file MD5
}

Events

Slots

default (scoped slot)

Notes

• Unstyled: no built-in CSS; the UI is entirely up to the slot consumer.
• uploadFn is usually wrapped from useUploader (the uploadFile method); demos use a mock to illustrate the flow.
• No transcoding step: the key difference from SwUploadVideo — plain files yield value (URL) immediately after upload, with no queryFn polling.
• Repeated triggers during pending are ignored (prevents duplicate uploads); the UI should reflect pending with a disabled / loading state.