FileInput Component

The <FileInput> component beautifies the browsers default HTML file Input, supporting both Single file uploads:

<FileInput id="profileUrl" label="Single File Upload" v-model="contact.profileUrl" />
help ?? useLabel
Current Single File Upload

and Multiple File Uploads:

<FileInput id="profileUrls" label="Multiple File Uploads" multiple :files="contact.files" />
help ?? useLabel
621.77 KB
695.37 KB
736.36 KB
469.93 KB

Use files when your binding to a UploadedFile complex type or values when binding to a string[] of file paths. When binding to relative paths, absolute URLs are resolved using assetsPathResolver.

Invoking APIs containing uploaded files

When uploading files, you'll need to submit API requests using the apiForm or apiFormVoid methods to send a populated FormData instead of a Request DTO, e.g:

<form @submit.prevent="submit">
    <FileInput id="profileUrls" label="Multiple File Uploads" multiple :files="files" />

<script setup lang="ts">
import { useClient } from "@servicestack/vue"
import { CreateContact } from "/mjs/dtos.mjs"

const client = useClient()
async function submit(e:Event) {
    const form = as HTMLFormElement
    const api = await client.apiForm(new CreateContact(), new FormData(form))
    if (api.succeeded) {

Integrates with Managed File Uploads

Using Managed File Uploads is a productive solution for easily managing file uploads where you can declaratively specify which location uploaded files should be written to, e.g:

public class UpdateContact : IPatchDb<Contact>, IReturn<Contact>
    public int Id { get; set; }
    public string? FirstName { get; set; }
    public string? LastName { get; set; }
    [Input(Type = "file"), UploadTo("profiles")]
    public string? ProfileUrl { get; set; }
    public int? SalaryExpectation { get; set; }
    public string? JobType { get; set; }
    public int? AvailabilityWeeks { get; set; }
    public EmploymentType? PreferredWorkType { get; set; }
    public string? PreferredLocation { get; set; }
    public string? Email { get; set; }
    public string? Phone { get; set; }
    [Input(Type = "tag"), FieldCss(Field = "col-span-12")]
    public List<string>? Skills { get; set; }
    [Input(Type = "textarea")]
    [FieldCss(Field = "col-span-12 text-center", Input = "h-48", Label= "text-xl text-indigo-700")]
    public string? About { get; set; }

This metadata information is also available to AutoForm components which supports invoking APIs with uploaded files:

<AutoEditForm type="UpdateContact" v-model="contact" formStyle="card" />

Update Contact

help ?? useLabel
Current Profile Url