File Input

Select and upload a file from the users local file system.

UsageAPI

Default

SWAN's FileInput component is built upon the native HTML <input type="file"> element, so it can accept all of the native input’s events and attributes, including onChange to get the contents of the uploaded file, or multiple to let the user select multiple files.

The FileInputLabel sub-component is the visible part, since we hide the native <input> and only show this <label>. For accessibility, it must have accessible text, such as visible HTML text, visually-hidden text, alt text on an image, or an aria-label.

ReactVanilla

<FileInput>
  <FileInputLabel>Upload a file</FileInputLabel>
</FileInput>

<FileInput>
  <FileInputLabel>Upload a file</FileInputLabel>
</FileInput>

<input type="file" class="swan-file-input swan-visually-hidden" id="my-input" />
<label
  class="swan-file-input-label swan-button swan-button-skin-secondary"
  for="my-input"
  >Upload a file</label
>

<input type="file" class="swan-file-input swan-visually-hidden" id="my-input" />
<label
  class="swan-file-input-label swan-button swan-button-skin-secondary"
  for="my-input"
  >Upload a file</label
>

Button Variants

FileUploadLabel is a <label>, but it accepts many of the visual props from Button. You can use these to customize the appearance of the label.

Available props are skin, sizeVariant, size, widthVariant, width, specialVariant, iconPosition, and buttonShape.

<>
  <FileInput>
    <FileInputLabel>Upload a file</FileInputLabel>
  </FileInput>
  <FileInput>
    <FileInputLabel skin="primary">Upload a file (Primary skin)</FileInputLabel>
  </FileInput>
  <FileInput>
    <FileInputLabel size="mini">Upload a file (mini size)</FileInputLabel>
  </FileInput>
  <FileInput>
    <FileInputLabel skin="link">Upload a file (link skin)</FileInputLabel>
  </FileInput>
</>

<>
  <FileInput>
    <FileInputLabel>Upload a file</FileInputLabel>
  </FileInput>
  <FileInput>
    <FileInputLabel skin="primary">Upload a file (Primary skin)</FileInputLabel>
  </FileInput>
  <FileInput>
    <FileInputLabel size="mini">Upload a file (mini size)</FileInputLabel>
  </FileInput>
  <FileInput>
    <FileInputLabel skin="link">Upload a file (link skin)</FileInputLabel>
  </FileInput>
</>

Disabled

Use disabled when a FileInput's action is unavailable.

<FileInput disabled>
  <FileInputLabel>Upload a file</FileInputLabel>
</FileInput>

<FileInput disabled>
  <FileInputLabel>Upload a file</FileInputLabel>
</FileInput>

Inside of a Form

Since it is a form element, FileInput can be used inside of a StandardForm along with a separate, external label and/or helper text.l

<StandardForm>
  <FormField>
    <FormLabel>Upload a file</FormLabel>
    <FormInputGroup>
      <FileInput onChange={e => e.target.files[0]}>
        <FileInputLabel size="mini">Upload a file</FileInputLabel>
      </FileInput>
      <FormHelper>Accepted File Types: jpg, pdf, etc</FormHelper>
    </FormInputGroup>
  </FormField>
</StandardForm>

<StandardForm>
  <FormField>
    <FormLabel>Upload a file</FormLabel>
    <FormInputGroup>
      <FileInput onChange={e => e.target.files[0]}>
        <FileInputLabel size="mini">Upload a file</FileInputLabel>
      </FileInput>
      <FormHelper>Accepted File Types: jpg, pdf, etc</FormHelper>
    </FormInputGroup>
  </FormField>
</StandardForm>

Props

This component does not have any custom props. Core props can still be used.

Was this page useful?

form

Published: Aug 11, 2023Last updated: Sep 3, 2024