The file input component allows users to select and upload one or multiple files from their local device. The label for the file input should be clear and descriptive, and should indicate the types of files that are accepted. Provide clear instructions on how to upload files, including maximum file size and accepted file types.
Example
code
<script type="module">
import '@blueprintui/components/include/file.js';
</script>
<bp-field>
<label>file</label>
<bp-file multiple accept=".png, .jpg, .jpeg"></bp-file>
</bp-field>
<script>
const file = document.querySelector('bp-file');
file.addEventListener('change', (e) => {
const image = document.createElement('img');
image.src = URL.createObjectURL(file.files[0]);
document.body.appendChild(image);
});
</script>
Vertical
code
<bp-form-group layout="vertical">
<bp-field layout="vertical">
<label>label</label>
<bp-file multiple></bp-file>
<bp-field-message>message text</bp-field-message>
</bp-field>
<bp-field layout="vertical">
<label>disabled</label>
<bp-file disabled></bp-file>
<bp-field-message>disabled message</bp-field-message>
</bp-field>
<bp-field layout="vertical" status="error">
<label>error</label>
<bp-file multiple></bp-file>
<bp-field-message status="error">error message</bp-field-message>
</bp-field>
<bp-field layout="vertical" status="success">
<label>success</label>
<bp-file multiple></bp-file>
<bp-field-message status="success">success message</bp-field-message>
</bp-field>
</bp-form-group>
Horizontal
code
<bp-form-group layout="horizontal">
<bp-field layout="horizontal">
<label>label</label>
<bp-file multiple></bp-file>
<bp-field-message>message text</bp-field-message>
</bp-field>
<bp-field layout="horizontal">
<label>disabled</label>
<bp-file disabled></bp-file>
<bp-field-message>disabled message</bp-field-message>
</bp-field>
<bp-field layout="horizontal" status="success">
<label>success</label>
<bp-file multiple></bp-file>
<bp-field-message status="success">success message</bp-field-message>
</bp-field>
<bp-field layout="horizontal" status="error">
<label>error</label>
<bp-file multiple></bp-file>
<bp-field-message status="error">error message</bp-field-message>
</bp-field>
</bp-form-group>
Compact
code
<bp-form-group layout="compact">
<bp-field layout="compact">
<label>label</label>
<bp-file multiple></bp-file>
<bp-field-message>message text</bp-field-message>
</bp-field>
<bp-field layout="compact">
<label>disabled</label>
<bp-file disabled></bp-file>
<bp-field-message>disabled message</bp-field-message>
</bp-field>
<bp-field layout="compact" status="success">
<label>success</label>
<bp-file multiple></bp-file>
<bp-field-message status="success">success message</bp-field-message>
</bp-field>
<bp-field layout="compact" status="error">
<label>error</label>
<bp-file multiple></bp-file>
<bp-field-message status="error">error message</bp-field-message>
</bp-field>
</bp-form-group>
Install
NPM
// npm package
import '@blueprintui/components/include/file.js';
CDN
<script type="module">
import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/file.js/+esm';
</script>
Accessibility
- Use appropriate
label
oraria-label
andaria-describedby
to provide an accessible name and description for the input. - Use the
accept
attribute to specify the types of files that are accepted by the file input field. - Use the
multiple
attribute to allow users to select and upload multiple files.