File Selector

file-selector

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

.slds-file-selector

.slds-file-selector__dropzone

.slds-file-selector__dropzone — Region that a file can be dropped within

.slds-has-drag-over

.slds-has-drag-over

.slds-file-selector__input

.slds-file-selector__input — Hidden input element

.slds-file-selector__button

.slds-file-selector__button — Faux button

.slds-file-selector_files

.slds-file-selector_files — 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.

.slds-file-selector__body

.slds-file-selector__body — Container for file selector content, specifically within the dropzone

.slds-file-selector__text

.slds-file-selector__text — Descriptive call back text

image

.slds-file-selector_images — Multi Line / Image Use as a dedicated dropzone for image files only. May require a cropping control.

integrated

.slds-file-selector_integrated — Invisible Dropzone (Container) Use when an entire container should be droppable. The container should have a visible boundary, like a modal, composer, or page.

.slds-file-selector__dropzone_integrated

.slds-file-selector__dropzone_integrated — Specific to integrated file selector — region that a file can be dropped within

.slds-has-drag

.slds-has-drag — Informs dropzone that file has been dragged into the viewport

.slds-has-drag-over

.slds-has-drag-over — Informs dropzone that file has been dragged into its region

.slds-file-selector__body_integrated

.slds-file-selector__body_integrated — Specific to integrated file selector — container for file selector content, specifically within the dropzone

.slds-file-selector__text_integrated

.slds-file-selector__text_integrated — Specific to integrated file selector — Descriptive call back text