lightdarkdefaultcompact
Getting StartedInstallationChangelogSupportGithubFrameworksAngularVueReactDemosFoundationThemesInternationalizationTypographyIconsPopoversLayoutGetting StartedBlockInlineGridComponentsAccordionAlertAlert GroupBadgeBreadcrumbButtonButton GroupButton ExpandButton HandleButton IconButton ResizeButton SortCardChatCheckboxColorData GridDateDialogDividerDrawerDropdownFileFormat DatetimeFormat NumberFormsForm InteractionsForm ValidationHeaderInputMenuMonthNavPaginationPasswordProgress BarProgress CircleProgress DotRadioRangeRatingSearchSelectStepperSwitchTabsTagTextareaTimeToastToggletipTooltipTreeData GridGetting StartedFooterPlaceholderAsyncResponsiveHeightPaginationBordersHoverLayerRange SelectionCSVColumn AlignmentColumn WidthColumn FixedColumn StickyColumn VisibilityColumn GroupsColumn SpanColumn ResizeDraggable ColumnsDraggable RowsRow HeaderRow Multi SelectRow Single SelectRow HeightRow ActionRow Action BulkRow StickyRow StripeRow FixedRow SortRow Groups

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

message textdisabled messageerror messagesuccess 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

message textdisabled messagesuccess messageerror 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

message textdisabled messagesuccess messageerror 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.