Custom File Input

Liander Bootstrap Custom File Input addition to Forms

On this page

File browser

The file input is the most gnarly of the bunch and uses JavaScript to hook them up with functional Choose file… and selected file name text. It is based on the custom-file from Bootstrap 4, but the required JavaScript is now part of Liander Bootstrap and is based on bs-custom-file-input.

Choose file

html

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="custom-file-label" for="customFile">Choose file</label>
</div>

We hide the default file <input> via opacity and instead style the <label>. The button is generated and positioned with ::after. Lastly, we declare a width and height on the <input> for proper spacing for surrounding content.

Translating or customizing the strings with SCSS

The :lang() pseudo-class is used to allow for translation of the “Browse” text into other languages. Override or add entries to the $custom-file-text Sass variable with the relevant language tag and localized strings. The English strings can be customized the same way. For example, here’s how one might add a Dutch translation (Dutch’s language code is nl):

$custom-file-text: (
  en: "Browse",
  es: "Kies bestand"
);

Here’s lang(es) in action on the custom file input for a Dutch translation:

Voeg je document toe

html

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLang" lang="nl">
  <label class="custom-file-label" for="customFileLang">Voeg je document toe</label>
</div>

You’ll need to set the language of your document (or subtree thereof) correctly in order for the correct text to be shown. This can be done using the lang attribute on the <html> element or the Content-Language HTTP header, among other methods.

Translating or customizing the strings with HTML

Bootstrap also provides a way to translate the “Browse” text in HTML with the data-browse attribute which can be added to the custom input label (example in Dutch):

Voeg je document toe

html

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLangHTML">
  <label class="custom-file-label" for="customFileLangHTML" data-browse="Bestand kiezen">Voeg je document toe</label>
</div>

Reset on Form Reset

On a form reset, all Custom File Inputs in that form are reset to their default text.

html

<form>
  <div class="custom-file mb-3">
    <input type="file" class="custom-file-input" id="customFileFormReset1">
    <label class="custom-file-label" for="customFileFormReset1">Choose file</label>
  </div>
  <div class="custom-file mb-3">
    <input type="file" class="custom-file-input" id="customFileFormReset2">
    <label class="custom-file-label" for="customFileFormReset2" data-browse="Bestand kiezen">Voeg je document toe</label>
  </div>
  <input type="reset" class="btn btn-default" value="Reset Form">
</form>