File input (upload)
ready

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).

Note #1: there is a JS dependency on this input for full behaviour. However, with JS disabled the native HTML file input will look and perform as normal.

Note #2: .js-ready should be placed upon a parent element to indicate that JavaScript is enabled on this browser.

Note #3: the label used in the examples below will be hidden without JS, due to the potential confusion a label that reads 'No file chosen' may cause when a file clearly has been chosen by the file input. If a 'true' label is required, please create a second label element that links to the same file input.

Examples

Basic implementation

<input type="file" name="file" id="single-upload" class="file-input">
    <label for="single-upload" data-button-text="Choose file">No file chosen</label>

Allow multiple files to be uploaded

<input type="file" name="file" id="multiple-upload" class="file-input" multiple>
    <label for="multiple-upload" data-button-text="Choose files">No files chosen</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" data-button-text="Choose several files">No files chosen</label>

Disabled input

<input type="file" name="file" id="disabled" class="file-input" disabled>
    <label for="disabled" data-button-text="Disabled"></label>

Dependencies

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

Usage

Class/JavaScript Hook Description Required?
{parent-element}.js-ready Placed on any parent element to indicate eg: body to ensure that JavaScript is enabled. 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.