BaseUploadFile

import BaseUploadFile from "@wikicasa-dev/components/UIKit/BaseUploadFile";

Use to attach a single document in a form: a CV in "Lavora con noi", a floor plan or a deed when publishing a listing. The whole field is the click target; its text comes from the label slot, which receives the chosen filename so you can show it.

It does not upload anything: it emits uploaded with the File, and you handle it. accept and multiple attributes are forwarded to the hidden <input type="file">.

#Usage

<script setup lang="ts">
import { ref } from "vue";
import BaseUploadFile from "@wikicasa-dev/components/UIKit/BaseUploadFile";

const floorPlan = ref<File | null>(null);
</script>

<template>
  <BaseUploadFile
    id="floor-plan-upload"
    label-text="Planimetria"
    accept="application/pdf, image/*"
    :clear="!floorPlan"
    @uploaded="(file) => (floorPlan = file)"
  >
    <template #label="{ filename }">
      <span>{{ filename || "Carica un file (PDF o immagine)" }}</span>
    </template>
  </BaseUploadFile>
  <button v-if="floorPlan" type="button" @click="floorPlan = null">Rimuovi</button>
</template>

#Do / Don't

• Do pass a unique id: it links the clickable area to the hidden file input.
• Do always fill the label slot with a call to action and show filename once chosen; the field is empty otherwise.
• Do reset the shown filename by switching clear to true (it emits cleared); switch it back to false before the next reset. Binding :clear="!file" does this for you.
• Don't rely on multiple: only the first selected file is emitted.
• Don't expect validation or error states; show errors next to it yourself.

#Styling hooks

• class on the wrapper; labelClasses on the clickable area (height 48px, centered text).
• fieldsetClasses for the dashed border/background (default lavender fill), legendClasses, floatingLabelClasses for the floating label.

#API

Generated from the component's types. Do not edit by hand.

Props

Name	Type	Default	Required	Description
id	string		yes
labelText	string	""
clear	boolean	false
labelClasses	ClassTypeProp	""
floatingLabelClasses	ClassTypeProp	""
fieldsetClasses	ClassTypeProp	""
legendClasses	ClassTypeProp	""

Events

Name	Payload
cleared
uploaded	[File]

v-model

None.

Slots

Name	Slot props
label	{ filename: string; }

Exposed (template ref)

None.