File

npm2.0.0

Example

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

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

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

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.