FileInput Component

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

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

Single File Upload

Single File Upload

and Multiple File Uploads:

<FileInput id="profileUrls" label="Multiple File Uploads" multiple :files="contact.files" />

Multiple File Uploads

Multiple File Uploads

1.jpg	619.43 KB
2.jpg	544.6 KB
3.jpg	512.79 KB
4.jpg	738.08 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" />
    <PrimaryButton>Save</PrimaryButton>
</form>

<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 = e.target as HTMLFormElement
    const api = await client.apiForm(new CreateContact(), new FormData(form))
    if (api.succeeded) {
        //...
    }
}
</script>

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; }
    [ValidateNotEmpty]
    public string? FirstName { get; set; }
    [ValidateNotEmpty]
    public string? LastName { get; set; }
    [Input(Type = "file"), UploadTo("profiles")]
    public string? ProfileUrl { get; set; }
    public int? SalaryExpectation { get; set; }
    [ValidateNotEmpty]
    public string? JobType { get; set; }
    public int? AvailabilityWeeks { get; set; }
    public EmploymentType? PreferredWorkType { get; set; }
    public string? PreferredLocation { get; set; }
    [ValidateNotEmpty]
    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" />