Hi I’m a bit stuck on following the instructions to get AutoFormFields to render a file upload control as seen here
[Auto Form Components]
This is my the vue component
<script lang="ts" setup>
import {onMounted, ref} from 'vue'
import {useHead} from "@unhead/vue"
import {ApiResponse} from "@servicestack/client"
import {useClient, useMetadata} from "@servicestack/vue"
import {QuerySignup, UpdateSignupForm} from "@/dtos";
useHead({title: 'Onboard'})
const client = useClient()
const {toFormValues} = useMetadata();
let api = ref<ApiResponse>();
let request = ref<UpdateSignupForm>();
onMounted(async () => {
let api = await client.api(new QuerySignup({id: 1}));
if (api.succeeded) {
request.value = new UpdateSignupForm(toFormValues(api.response!.results[0]));
}
})
async function submit(e: Event) {
api.value = await client.api(request.value!)
}
</script>
<template>
<div class="mt-8 mb-20 mx-auto max-w-screen-md">
<h1 class="mb-4 text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-50 sm:text-4xl">On Boarding</h1>
<form v-if="request" @submit.prevent="submit">
<div class="shadow sm:overflow-hidden sm:rounded-md">
<div class="space-y-6 py-6 px-4 sm:p-6 bg-white dark:bg-black">
<AutoFormFields v-model="request" :api="api"/>
</div>
<div class="bg-gray-50 dark:bg-gray-800 px-4 py-3 text-right sm:px-12">
<PrimaryButton>Save</PrimaryButton>
</div>
</div>
</form>
</div>
</template>
<style scoped>
</style>
and these are my models
[Tag("signup")]
[Description("Find Signup")]
[Route("/signups", "GET")]
[Route("/signup/{Id}", "GET")]
[AutoApply(Behavior.AuditQuery)]
[HirerActionAuthFilter]
public class QuerySignup : QueryDb<HirerSignupForm>
{
public int? Id { get; set; }
public int? HirerId { get; set; }
}
[Tag("signup")]
[Description("Edit Hirer Signup Form")]
[Notes("Sign up form that hirer has to first fill out")]
[Route("/hirer/signup/{Id}", "PATCH")]
[ValidateHasRole(Roles.Hirer)]
[AutoApply(Behavior.AuditModify)]
public class UpdateSignupForm : IPatchDb<HirerSignupForm>, IReturn<HirerSignupForm>
{
[AutoIncrement] [PrimaryKey] public int Id { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
// Please Provide DVLA Check PDF
[Input(Type = "file")]
[UploadTo("local")]
public string DvlaCheckPdfUrl { get; set; }
}
and this is the data model
public class HirerSignupForm : AuditBase
{
[AutoIncrement] [PrimaryKey] public int Id { get; set; }
[Index] public int HirerId { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
[Input(Type = "file")]
[UploadTo("local")]
public string DvlaCheckPdfUrl { get; set; }
}
But the it renders the field as despite having the attributes
Is the component intended to be used this way?
