File Selector

File Selector

The File selector component allows the user to select file(s) from a user’s file system. Either natively using an file input or drag and drop.

Base

Preview

About File Selector

Accessibility

When implementing this component, pay special attention to the following:

Notable attributes

  • aria-labelledby is placed on the HTML input to form an "Accessible Label" from 2 seperate visible text labels, by referencing their id attributes

Overview of CSS Classes

Selector.slds-file-selector
Summary
Restrictdiv
VariantTrue
Selector.slds-file-selector__dropzone
Summary

Region that a file can be dropped within

Restrict.slds-file-selector div
Selector.slds-has-drag-over
Summary
Restrict.slds-file-selector__dropzone
ModifierTrue
Selector.slds-file-selector__input
Summary

Hidden input element

Restrict.slds-file-selector input
Selector.slds-file-selector__button
Summary

Faux button

Restrict.slds-file-selector button, .slds-file-selector span
Selector.slds-file-selector_files
Summary

Modifications based on context

Single Line Dedicated dropzone when there are multiple dropzones in the form or when the input is positioned among other form inputs.

Restrict.slds-file-selector
Selector.slds-file-selector__body
Summary

Container for file selector content, specifically within the dropzone

Restrict.slds-file-selector label
Selector.slds-file-selector__text
Summary

Descriptive call back text

Restrict.slds-file-selector span
Selector.slds-file-selector_images
Summary

Multi Line / Image

Use as a dedicated dropzone for image files only. May require a cropping control.

Restrict.slds-file-selector
VariantTrue
Selector.slds-file-selector_integrated
Summary

Invisible Dropzone (Container)

Use when an entire container should be droppable. The container should have a visible boundary, like a modal, composer, or page.

Restrict.slds-file-selector
VariantTrue
Selector.slds-file-selector__dropzone_integrated
Summary

Specific to integrated file selector — region that a file can be dropped within

Restrict.slds-file-selector_integrated div
Selector.slds-has-drag
Summary

Informs dropzone that file has been dragged into the viewport

Restrict.slds-file-selector__dropzone_integrated
ModifierTrue
Selector.slds-has-drag-over
Summary

Informs dropzone that file has been dragged into its region

Restrict.slds-file-selector__dropzone_integrated
ModifierTrue
Selector.slds-file-selector__body_integrated
Summary

Specific to integrated file selector — container for file selector content, specifically within the dropzone

Restrict.slds-file-selector_integrated label
Selector.slds-file-selector__text_integrated
Summary

Specific to integrated file selector — Descriptive call back text

Restrict.slds-file-selector_integrated span