Skip to main content

File

Overview​

The File component provides a Bulma-styled file input, supporting color, size, boxed/fullwidth/align styles, icons, "has name", and filename display. It is highly customizable for all file upload UI needs.

Import​

import { File, Icon } from '@allxsmith/bestax-bulma';

Props​

PropTypeDescription
color'primary' | 'link' | ... | 'white'Bulma color modifier for the file input.
size'small' | 'medium' | 'large'Size modifier for the file input.
isBoxedbooleanBoxed file input.
isFullwidthbooleanFile input expands to full width.
isRightbooleanAlign file input to the right.
isCenteredbooleanCenter the file input.
hasNamebooleanShow a file name indicator.
labelReact.ReactNodeCustom label text or node.
iconLeftReact.ReactNodeLeft icon element.
iconRightReact.ReactNodeRight icon element.
classNamestringAdditional CSS classes.
inputClassNamestringAdditional CSS classes for the <input>.
fileNamestringFile name to display.
...All standard <input type="file"> and Bulma helper props(See Helper Props)

Usage​

Default​

<File label="Choose a file..." iconLeft={<Icon name="upload" />} />

With hasName and Filename Display​

<File
  hasName
  fileName="resume.pdf"
  label="Choose a file..."
  iconLeft={<Icon name="upload" />}
/>

Right-Aligned​

<File
  hasName
  isRight
  fileName="contract.pdf"
  label="Choose a file..."
  iconLeft={<Icon name="upload" />}
/>

Full Width​

<File
  hasName
  isFullwidth
  fileName="picture.png"
  label="Choose a file..."
  iconLeft={<Icon name="upload" />}
/>

Boxed Style​

<File isBoxed label="Choose a file..." iconLeft={<Icon name="upload" />} />

Boxed and Has Name​

<File
  isBoxed
  hasName
  fileName="holiday.jpg"
  label="Choose a file..."
  iconLeft={<Icon name="upload" />}
/>

Colors​

<File color="primary" label="Choose a file..." iconLeft={<Icon name="upload" />} />
<File color="info" label="Choose a file..." iconLeft={<Icon name="upload" />} />
<File color="warning" label="Choose a file..." iconLeft={<Icon name="upload" />} />
<File color="danger" label="Choose a file..." iconLeft={<Icon name="upload" />} />

Sizes​

<File size="small" label="Choose a file..." iconLeft={<Icon name="upload" />} />
<File label="Choose a file..." iconLeft={<Icon name="upload" />} /> {/* Normal */}
<File size="medium" label="Choose a file..." iconLeft={<Icon name="upload" />} />
<File size="large" label="Choose a file..." iconLeft={<Icon name="upload" />} />

Sizes with Name​

<File size="small" hasName fileName="sample.txt" label="Choose a file..." iconLeft={<Icon name="upload" />} />
<File hasName fileName="sample.txt" label="Choose a file..." iconLeft={<Icon name="upload" />} />
<File size="medium" hasName fileName="sample.txt" label="Choose a file..." iconLeft={<Icon name="upload" />} />
<File size="large" hasName fileName="sample.txt" label="Choose a file..." iconLeft={<Icon name="upload" />} />

Sizes with Boxed​

<File size="small" isBoxed label="Choose a file..." iconLeft={<Icon name="upload" />} />
<File isBoxed label="Choose a file..." iconLeft={<Icon name="upload" />} /> {/* Normal */}
<File size="medium" isBoxed label="Choose a file..." iconLeft={<Icon name="upload" />} />
<File size="large" isBoxed label="Choose a file..." iconLeft={<Icon name="upload" />} />

Sizes with Name and Boxed​

<File size="small" isBoxed hasName fileName="summary.docx" label="Choose a file..." iconLeft={<Icon name="upload" />} />
<File isBoxed hasName fileName="summary.docx" label="Choose a file..." iconLeft={<Icon name="upload" />} /> {/* Normal */}
<File size="medium" isBoxed hasName fileName="summary.docx" label="Choose a file..." iconLeft={<Icon name="upload" />} />
<File size="large" isBoxed hasName fileName="summary.docx" label="Choose a file..." iconLeft={<Icon name="upload" />} />

Alignment: Centered​

<File
  color="info"
  isCentered
  isBoxed
  hasName
  fileName="centered.pdf"
  label="Choose a file..."
  iconLeft={<Icon name="upload" />}
/>

Alignment: Right​

<File
  color="primary"
  isRight
  hasName
  fileName="right.pdf"
  label="Choose a file..."
  iconLeft={<Icon name="upload" />}
/>

Accessibility​

  • The root is a <div class="file"> with a nested <label> and <input type="file">.
  • The label is always clickable.
  • Add aria-label to the <input> for accessibility if your label is not plain text.

Additional Resources​