File

File

A file input uses the same .form-control and size classes as a text field. Bootstrap 2,007 restyles the browser's "Choose File" button through the ::file-selector-button pseudo-element, so multiple, accept and dropping files onto the field keep working.

Single, multiple, small and disabled file inputsHTMLLive

<link rel=stylesheet href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
<div class="p-3 row g-2">
  <div class="col-6"><input class="form-control" type="file" accept="image/*"></div>
  <div class="col-6"><input class="form-control" type="file" multiple></div>
  <div class="col-6"><input class="form-control form-control-sm" type="file"></div>
  <div class="col-6"><input class="form-control" type="file" disabled></div>
</div>

Browser output of Listing 3.35 — Browser output of 35

The "No file chosen" text is localized by the browser, so leave room for longer strings. Read the chosen files from input.files (FileReader and Blob).

MENU