File Upload

File upload inputs are a combination of button and input field. They are included in forms where the user has the option to include files.

The user does not input text into the input field; it automatically gets filled with file information once a file has been chosen.

Choose file is the action button to be selected by the user. Once clicked, the button opens a new window where the user can choose a file. File types are determined by the system parameters.

File browser

We have a custom file uploader that requires additional JavaScript for full functionality.

If you want more information about customizing this component, visit Bootstrap's documentation about file browsers. 

<div class="custom-file">
    <input type="file" id="file" class="custom-file-input">
    <span class="custom-file-control"></span>
    <label class="custom-file-label" for="customFile">Choose file</label>
</div>
File upload inputs have three states:

Regular state: The button uses the colour #002D42 shadow at 100% opacity, white text, with a border radius of 4px. Corners on the top and bottom right of the file upload button has a border radius of 0px. The button is aligned to the left of the field and includes the folder icon.

The input field is aligned to the right of the button. It is a 42px high rectangle with a border radius of 4px. The background colour is #FFFFFF, border colour is #CCCCCC with a drop shadow of 1px blur 20% opacity black. Text is aligned to the left of the input field and follows the standards for placeholder text. The field has a padding of 11px.



Focus state: The button uses the colour #002D42 at 100% opacity, white text, with a border radius of 4px and padding of 15px. Includes a 3px stroke in the primary colour.

The input field is aligned to the right of the button. It is a 42px high rectangle with a border radius of 4px. The background colour is #FFFFFF, border colour is #CCCCCC. Text is aligned to the left of the input field and follows the standards for placeholder text. The field has a padding of 11px.

Focus states have a 1 px border with the colour #269abc. There is also a box shadow that uses a colour of #002D42 with an opacity of 25% and a blur 3 px.

Disabled state: The button uses the colour #002D42 at 50% opacity, white text, with a border radius of 4px and padding of 15px.

The input field is aligned to the right of the button. It is a 42px high rectangle with a border radius of 4px. The background colour is #FFFFFF, border colour is #CCCCCC. Text is aligned to the left of the input field and follows the standards for placeholder text. The field has a padding of 11px.