causeway-standard-theme/causeway/docs/components/form-fields/image-input.html

<div>
  <a id="forms-image"></a>
  <header class="content-header">
    <h1 class="title">
      Image
    </h1>
  </header>

  <p>
    Image controls comprise of a surround and 4 styles, toggled by optional attributes and classes. The attribute should be added to the <code>&lt;button&gt;</code> tag, and classes should follow on from the surrounding <code>&lt;div&gt;</code>.
  </p>
  <p>
    The control contains an <code>&lt;img&gt;</code> tag to display either a relevant placeholder or a preview of the currently uploaded file.
  </p>
  <p>
    Currently, 2 placeholder images have been included, namely <code>image_placeholder.png</code> and <code>image_placeholderb.png</code>
  </p>
  <div class="table-wrapper">
    <table class="table table-striped">
    <thead>
      <tr>
        <th>
          Style
        </th>
        <th>
          Attribute
        </th>
        <th>
          Value
        </th>
        <th>
          Standard Example
        </th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <td colspan="4">
        </td>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <td>
          Standard
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
          <form role="form">
            <div class="form-row">
              <div class="form-group image-input">
                <input type="file" class="form-control file-input-image sr-only" id="image-field1a" name="image_field1a">

                <div class="image-display-wrapper">
                  <img class="image-input-image" alt="" src="/images/image_placeholder.png" />
                </div>
                <label for="image-field1a" class="btn btn-icon btn-default btn-file-choose">
                  <span class="fa fa-search"></span>
                </label>

              </div>
            </div>
          </form>
        </td>
      </tr>
      <tr>
        <td>
          Disabled
        </td>
        <td>
          class
          <br/><br/>
          disabled
        </td>
        <td>
          disabled
          <br/><br/>
          disabled
        </td>
        <td>
          <form role="form">
            <div class="form-row">
              <div class="form-group image-input disabled">
                <input type="file" disabled="disabled" class="form-control file-input-image sr-only" id="image-field1b" name="image_field1b">

                <div class="image-display-wrapper">
                  <img class="image-input-image" alt="" src="/images/image_placeholderb.png" />
                </div>
                <label for="image-field1b" class="btn btn-icon btn-default btn-file-choose" disabled="disabled">
                  <span class="fa fa-search"></span>
                </label>
              </div>
            </div>
          </form>
        </td>
      </tr>
      <tr>
        <td>
          Invalid
        </td>
        <td>
          class
        </td>
        <td>
          invalid
        </td>
        <td>
          <form role="form">
            <div class="form-row">
              <div class="form-group image-input invalid">
                <input type="file" class="form-control file-input-image sr-only" id="image-field1c" name="image_field1c">

                <div class="image-display-wrapper">
                  <img class="image-input-image" alt="" src="/images/image_placeholder.png" />
                </div>
                <label for="image-field1c" class="btn btn-icon btn-default btn-file-choose">
                  <span class="fa fa-search"></span>
                </label>
              </div>
            </div>
          </form>
        </td>
      </tr>
      <tr>
        <td>
          Read Only
        </td>
        <td>
          class
          <br/><br/>
          readonly
        </td>
        <td>
          readonly
          <br/><br/>
          readonly
        </td>
        <td>
          <form role="form">
            <div class="form-row">
              <div class="form-group image-input form-group-last readonly">
                <input type="file" class="form-control file-input-image sr-only" id="image-field1d" name="image_field1d">

                <div class="image-display-wrapper">
                  <img class="image-input-image" alt="" src="/images/image_placeholder.png" />
                </div>
              </div>
            </div>
          </form>
        </td>
      </tr>
    </tbody>
  </table>
  </div>
  <pre>
    <code>
      &lt;form role=&quot;form&quot;&gt;
        &lt;div class=&quot;form-row&quot;&gt;
          &lt;div class=&quot;form-group image-input&quot;&gt;
            &lt;input type=&quot;file&quot; class=&quot;form-control file-input-image sr-only&quot; id=&quot;image-field1a&quot; name=&quot;image_field1a&quot;&gt;

            &lt;div class=&quot;image-display-wrapper&quot;&gt;
              &lt;img class=&quot;image-input-image&quot; alt=&quot;&quot; src=&quot;images/image_placeholder.png&quot; /&gt;
            &lt;/div&gt;
            &lt;label for=&quot;image-field1a&quot; class=&quot;btn btn-icon btn-default btn-file-choose&quot;&gt;
              &lt;span class=&quot;glyphicon glyphicon-search&quot;&gt;&lt;/span&gt;
            &lt;/label&gt;

          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/form&gt;
    </code>
  </pre>
</div>