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

No content has been added for this component.

No content has been added for this component.

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