Form File ​

Single File Mode ​

The default behavior is single file mode. While using single file mode the modelValue will be a single File object

<template>
  <BFormFile v-model="file" label="Hello!" />
  <div class="mt-3">
    Files: <strong>{{ file }}</strong>
  </div>
</template>

<script setup lang="ts">
const file = ref<null | File>(null)
</script>

Multiple File Mode ​

To toggle multiple file mode, simply set the multiple prop to true. While in multiple file mode, the modelValue will be a File[], even if only one file is selected

<template>
  <BFormFile v-model="files" multiple />
  <div class="mt-3">
    Files: <strong>{{ files }}</strong>
  </div>
</template>

<script setup lang="ts">
const files = ref<null | File[]>(null)
</script>

Limiting to certain file types ​

You can limit the file types by setting the accept prop. The accept attribute is a csv list of acceptable types. This can be a string or string[]. If a string[] is inputted, it simply gets joined as a csv list

<template>
  <BFormFile v-model="file" accept="image/*" />
  <div class="mt-3">
    Files: <strong>{{ file }}</strong>
  </div>
</template>

<script setup lang="ts">
const file = ref<null | File>(null)
</script>

Drag and Drop Support ​

Drag and drop support uses the browsers default behavior. You can explicitly disable drag and drop by using the noDrop prop

<template>
  <BFormFile v-model="file" no-drop />
  <div class="mt-3">
    Files: <strong>{{ file }}</strong>
  </div>
</template>

<script setup lang="ts">
const file = ref<null | File>(null)
</script>

Sizing ​

You can modify the size of the form control by using the size prop

<BFormFile class="mt-3" size="sm" />
<BFormFile class="mt-3" />
<BFormFile class="mt-3" size="lg" />

Label ​

You can add a label above the input by using the label prop or the label slot

<BFormFile class="mt-3" label="I am first!" />
<BFormFile class="mt-3">
  <template #label>
    I am second!
  </template>
</BFormFile>

Directory Mode ​

By adding the directory prop, a user can select directories instead of files

Example to be Written ​

Autofocus ​

If you set the autofocus prop to true, the input will be focused when the component is inserted

<BFormFile class="mt-3" autofocus />

Contextual State ​

You can use the state prop to provide visual feedback on the state of the input

<BFormFile class="mt-3" :state="false" />
<BFormFile class="mt-3" :state="true" />

Modifying the file selection ​

With inputs that are of type file, the value is strictly uni-directional. Meaning that you cannot change the value of the input via JavaScript. You can change the value of the v-model, and this will work for an "outside view", however, the actual input element will not have its FileList changed. This is for security reasons as a malicious script could attempt to read and steal documents

Exposed functions ​

The BFormFile exposes functions to control the component: focus(), blur(), reset(). These are accessed through the template ref.

1. Focus: focuses the file input
2. Blur: blurs the file input focus
3. Reset: Resets the file selection so that no file is selected