Upload Card
The Upload Card provides a visually pleasing lockup for a file upload field along with other helpful controls.
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 |
---|---|---|---|
|
Array containing file information |
|
|
|
Array containing error messages |
|
|
|
Adjusts UI to selected state when file is selected |
Boolean |
|
|
Adjusts UI to error state |
Boolean |
|
|
Text for upload button |
String |
|
|
Small text to provide additional information |
String |
|