Examples

The file input component is designed to create a consistent file upload experience across devices and browsers with simple filename previewing.

  <div class="fileinput fileinput-new" data-provides="fileinput">
    <div class="input-append">
      <input type="text" class="uneditable-input fileinput-filename" />
      <span class="btn btn-file">
        <span class="fileinput-new">Select file</span>
        <span class="fileinput-exists">Change</span>
        <input type="file" />
      </span>
      <a href="#" class="btn fileinput-exists" data-dismiss="fileinput">Remove</a>
    </div>
  </div>  

Layout

Using the given elements, you can layout the file input component the way you want, either with a fixed width and height or with max-width and max-height.

Options via data attributes

Add data attributes to register the file input component. The main container should either have the .fileinput-new class for a new record (one with no file yet specified) or the .fileinput-exists class if an existing file is present. Elements inside the container with the .fileinput-new and .fileinput-exists classes will be shown or hidden based on the current state. The content of .fileinput-preview is replaced when a file is selected. Implement a button to clear the file with data-dismiss="fileinput".