File v0.12.0+

Drop Zone

Added: v0.14.0

A container that provides a visual overlay when dragging a file, marking the boundaries of where a user can drop.

The drop zone ignores any padding applied to it.

Drop files here or

browse your files 

<hx-drop-zone>
  <hx-drop-fence>
    <p>
      Drop files here or
      <hx-file-control>
        <input
          id="fileInputDropZoneDemo"
          type="file"
        />
        <label for="fileInputDropZoneDemo">
          <hx-file-input class="hxBtn hxTertiary">
            browse your files
          </hx-file-input>
        </label>
      </hx-file-control>
    </p>
  </hx-drop-fence>
</hx-drop-zone>

File Input

Added: v0.13.0

Button Variant

(default)
Icon
Control Options 
<hx-file-control>
  <input
    id="fileInputDemo"
    type="file"
  />
  <label for="fileInputDemo">
    <hx-file-input
      class="hxBtn"
      icon="upload">
      Upload File
    </hx-file-input>
  </label>
</hx-file-control>

Microsoft browsers never match the input[type="file"]:active CSS selector.

Microsoft browsers apply two tab stops on <input type="file"> elements.

File Tile

Added: v0.12.0
State
Tile Options 
<hx-file-tile
  details="1.3mb"
  href="path/to/id_rsa.pub"
  icon="key"
  name="id_rsa.pub">
</hx-file-tile>

See Also