Uploader

JavaScript

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

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.
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.

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

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>
Drag an image to upload
Or choose your image

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>
Drag some files to upload
Or choose your files
Deploys by Netlify