Upload Card

The Upload Card provides a visually pleasing lockup for a file upload field along with other helpful controls.


React Component

Initial State

Recommended dimensions or file size requirements

Selected File State

contacts.csv

Recommended dimensions or file size requirements

Error State

Recommended dimensions or file size requirements

This is the error message.

Sage Component

SageUploadCard
<h3 class="t-sage-heading-6">Initial State</h3>
<%= sage_component SageUploadCard, {
  selection_label: "Select a file",
  selection_subtext: "Recommended dimensions or file size requirements",
} %>

<h3 class="t-sage-heading-6">Selected File State</h3>

<%= sage_component SageUploadCard, {
  accepted_files: [
    {name: "contacts.csv"},
  ],
  file_selected: true,
  selection_label: "Replace file",
  selection_subtext: "Recommended dimensions or file size requirements",
} %>

<h3 class="t-sage-heading-6">Error State</h3>

<%= sage_component SageUploadCard, {
  has_error: true,
  selection_label: "Select a file",
  selection_subtext: "Recommended dimensions or file size requirements",
  errors: [
    {text: "This is the error message."},
  ]
} %>
Property Description Type Default

accepted_files

Array containing file information

Array<{
  name: String,
  size: String,
}>

nil

errors

Array containing error messages

Array<{
  text: String,
}>

nil

file_selected

Adjusts UI to selected state when file is selected

Boolean

nil

has_error

Adjusts UI to error state

Boolean

nil

selection_label

Text for upload button

String

nil

selection_subtext

Small text to provide additional information

String

nil