Sections

Uploader

The Stacks uploader is a custom-styled file input with added functionality to preview the file or files the user is uploading.

Classes

Section titled Classes

Class	Applied to	Description
`.s-uploader`	N/A	Base uploader element
`.is-active`	`.s-uploader`	Active styling for uploader element. Added on `dragenter` or when input has value.
`.is-disabled`	`.s-uploader`	Appropriately styles the uploader when it is disabled. Don’t forget to also add the `disabled` attribute on the input itself.
`.has-error`	`.s-uploader`	Adds error styling to the component.
`.has-success`	`.s-uploader`	Adds success styling to the component.
`.has-warning`	`.s-uploader`	Adds warning styling to the component.
`.s-uploader--container`	Child of `.s-uploader`	Container for the visual elements of the uploader.
`.s-uploader--input`	Child of `.s-uploader`	Adds proper styling to the uploader's file input. Visually hidden.
`.s-uploader--previews`	Child of `.s-uploader--container`	Container for selected item(s) preview.
`.s-uploader--preview`	Child of `.s-uploader--previews`	An image or string to preview a selected file.
`.s-uploader--reset`	Child of `.s-uploader--container`	Used to reset the uploader.

JavaScript

Section titled JavaScript

Attributes

Section titled Attributes

Attribute	Applied to	Description
`data-controller="s-uploader"`	Controller element	Wires up the element to the uploader controller. This may be a `.s-uploader` element or a wrapper element.
`data-target="s-uploader.uploader"`	`.s-uploader`	Wires up the element containing `input`, `previews`, and `reset` targets.
`data-s-uploader-target="input"`	`.s-uploader--input`	Designates the file input element.
`data-target="s-uploader.previews"`	`.s-uploader--previews`	Designates the element to act as a container to file preview(s).
`data-action="input->s-uploader#handleInput"`	`input[type=file]` element	Wires up the element to provide files for preview on change.
`data-action="click->s-uploader#reset"`	Any child element	Wires up the element to reset the uploader to its initial state.
`data-s-uploader-show-on-input`	Any child element	Toggles element visibility. Shows when input has value.
`data-s-uploader-hide-on-input`	Any child element	Toggles element visibility. Hides when input has value.
`data-s-uploader-enable-on-input`	Any child element	Toggles element disabled state. Disables when input has no value.

Examples

Section titled Examples

Including a file input with the class s-uploader--input within s-uploader will provide the correct styling for an upload section.

Profile picture

Section titled Profile picture

In this example, we’re showing a single file input with an image as the example’s placeholder illustration.

<label class="d-block s-label mb4" for="uploader">Upload a profile picture</label>
<div data-controller="s-uploader">
    <div class="s-uploader mb24 wmx3" data-target="s-uploader.uploader">
        <input id="uploader"
               type="file"
               class="s-uploader--input"
               data-s-uploader-target="input"
               data-action="input->s-uploader#handleInput" />
        <div class="s-uploader--container">
            <div class="s-uploader--previews d-none"
                data-target="s-uploader.previews"
                data-s-uploader-show-on-input>
            </div>
            <button class="s-uploader--reset s-btn s-btn__muted d-none" data-action="click->s-uploader#reset" data-s-uploader-show-on-input>
                @Svg.ClearSm
            </button>
            <div data-s-uploader-hide-on-input>
                @Svg.Spot.Image.With("fc-medium mb8")
                <div class="fs-body2">Drag an image to upload</div>
                <div class="fs-caption">
                    Or <span class="s-link">choose your image</span>
                </div>
            </div>
        </div>
    </div>
    <div>
        <button class="s-btn s-btn__primary" data-s-uploader-enable-on-input disabled>
            Upload
        </button>
        <button class="s-btn d-none"
                data-action="click->s-uploader#reset"
                data-s-uploader-show-on-input>
            Cancel
        </button>
    </div>
</div>

Upload a profile picture

Drag an image to upload

Or choose your image

Multiple files

Section titled Multiple files

In this example, this uploader accepts multiple documents so we’ve swapped @Svg.Spot.Image for @Svg.Spot.DocumentAlt and changed the input’s description and attributes to allow for multiples.

<label class="d-block s-label mb4" for="uploader">Choose your files</label>
<div data-controller="s-uploader">
    <div class="s-uploader mb24 wmx3" data-target="s-uploader.uploader">
        <input id="uploader"
               type="file"
               class="s-uploader--input"
               data-s-uploader-target="input"
               data-action="input->s-uploader#handleInput"
               multiple />
        <div class="s-uploader--container">
            <div class="s-uploader--previews d-none"
                data-target="s-uploader.previews"
                data-s-uploader-show-on-input>
            </div>
            <button class="s-uploader--reset s-btn s-btn__muted d-none" data-action="click->s-uploader#reset" data-s-uploader-show-on-input>
                @Svg.ClearSm
            </button>
            <div data-s-uploader-hide-on-input>
                @Svg.Spot.Image.With("fc-medium mb8")
                <div class="fs-body2">Drag some files to upload</div>
                <div class="fs-caption">
                    Or <span class="s-link">choose your files</span>
                </div>
            </div>
        </div>
    </div>
    <div>
        <button class="s-btn s-btn__primary" data-s-uploader-enable-on-input disabled>
            Upload
        </button>
        <button class="s-btn d-none"
                data-action="click->s-uploader#reset"
                data-s-uploader-show-on-input>
            Cancel
        </button>
    </div>
</div>

Choose your files

Drag some files to upload

Or choose your files