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`