Form File | Components | BootstrapVue

Component reference

`<b-form-file>`

View source

<b-form-file> Component aliases
<b-form-file> Properties
<b-form-file> v-model
<b-form-file> Slots
<b-form-file> Events

Component aliases

<b-form-file> can also be used via the following aliases:

<b-file>

Note: component aliases are only available when importing all of BootstrapVue or using the component group plugin.

Properties

All property default values are globally configurable.

Property (Click to sort ascending)	Type (Click to sort ascending)	Default	Description
`accept`	`String`	`''`	Value to set on the file input's `accept` attribute
`autofocus`	`Boolean`	`false`	When set to `true`, attempts to auto-focus the control when it is mounted, or re-activated when in a keep-alive. Does not set the `autofocus` attribute on the control
`browse-text`	`String`	`'Browse'`	Text content for the file browse button
`capture`	`Boolean`	`false`	When set, will instruction the browser to use the devices camera (if supported)
`directory`	`Boolean`	`false`	Enable `directory` mode (on browsers that support it)
`disabled`	`Boolean`	`false`	When set to `true`, disables the component's functionality and places it in a disabled state
`drop-placeholder`	`String`	`'Drop files here'`	Text to display as the placeholder when files are being dragged and it's allowed to drop them
`file-name-formatter`	`Function`		Method to format the file names for display. Refer to the docs for details
`form`	`String`		ID of the form that the form control belongs to. Sets the `form` attribute on the control
`id`	`String`		Used to set the `id` attribute on the rendered content, and used as the base to generate any additional element IDs as needed
`multiple`	`Boolean`	`false`	When set, will allow multiple files to be selected. `v-model` will be an array
`name`	`String`		Sets the value of the `name` attribute on the form control
`no-drop`	`Boolean`	`false`	Disable drag and drop mode
`no-drop-placeholder`	`String`	`'Not allowed'`	Text to display as the placeholder when files are being dragged and it isn't allowed to drop them
`no-traverse`	`Boolean`	`false`	Wether to returns files as a flat array when in `directory` mode
`placeholder`	`String`	`'No file chosen'`	Sets the `placeholder` attribute value on the form control
`plain`	`Boolean`	`false`	Render the form control in plain mode, rather than custom styled mode
`required`	`Boolean`	`false`	Adds the `required` attribute to the form control
`size`	`String`		Set the size of the component's appearance. 'sm', 'md' (default), or 'lg'
`state`	`Boolean`	`null`	Controls the validation state appearance of the component. `true` for valid, `false` for invalid, or `null` for no validation state
`value` v-model	`Array` or `File`	`null`	The current value of the file input. Will be a single `File` object or an array of `File` objects (if `multiple` or `directory` is set). Can be set to `null`, or an empty array to reset the file input

`v-model`

Property	Event
`value`	`input`

Slots

Name	Scoped	Description
`drop-placeholder`		Placeholder content when files are about to be dropped. Defaults to value of `drop-placeholder` prop
`file-name`		Scoped slot for formatting the file names
`placeholder`	No	Placeholder content, when no files selected. Defaults to `placeholder` prop value

Events

Event	Arguments	Description
`change`	`event` - Native change event object	Original change event of the input
`input`	`file` - Will be a single File object in single mode or an array of File objects in multiple mode	Updates the `v-model` value (see docs for more details)

Importing individual components

You can import individual components into your project via the following named exports:

Component	Named Export	Import Path
`<b-form-file>`	`BFormFile`	`bootstrap-vue`

Example:

import { BFormFile } from 'bootstrap-vue'
Vue.component('b-form-file', BFormFile)

Importing as a Vue.js plugin

This plugin includes all of the above listed individual components. Plugins also include any component aliases.

Named Export	Import Path
`FormFilePlugin`	`bootstrap-vue`

Example:

import { FormFilePlugin } from 'bootstrap-vue'
Vue.use(FormFilePlugin)