File input (upload)
beta

Introduction

Input field used to upload files to the server. Leverages native HTML inputs to optionally upload multiple files through the same input (although this facility would require further configuration on the server side).

Examples

Basic implementation

<input type="file" name="file" id="single-upload" class="file-input">
    <label for="single-upload">Upload file</label>

Allow multiple files to be uploaded

<input type="file" name="file" id="multiple-upload" class="file-input" multiple>
    <label for="multiple-upload">Upload file</label>

Allow multiple files with custom caption

<input type="file" name="file" id="mutiple-custom-upload" class="file-input" multiple data-multiple-caption="There are {count} files to upload">
    <label for="mutiple-custom-upload">Upload file</label>

Disabled input

<input type="file" name="file" id="disabled" class="file-input" disabled>
    <label for="disabled">Upload file</label>

Dependencies

  • src/styles/base/*.scss
  • src/styles/components/elements/_file-input.scss
  • src/scripts/modules/pfFileInput.js

Usage

Class/JavaScript Hook Description Required?
.file-input Placed on input type='file' Required.
multiple Placed on a file input that is allowed to upload multiple files Optional.
disabled Placed on a file input that is disabled Optional.
data-multiple-caption='{count}' files Used when custom text is required for uploading multiple files. The {count} is interpolated to the number of files being uploaded. Optional.