File

npm2.0.0

Example

Enables users to upload and select files from their device.

file

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

Demonstrates the file input in vertical form layout.

label

message text

disabled

disabled message

error

error message

success

success message

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

Demonstrates the file input in horizontal form layout.

label

message text

disabled

disabled message

success

success message

error

error message

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

Demonstrates the file input in compact form layout.

label

message text

disabled

disabled message

success

success message

error

error message

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 or aria-label and aria-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.