Components

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.

FilesFiles › DefaultFiles › ErrorFiles › DragoverFiles › Dragover with errorFilesdev ready

Preview

Code

<div class="slds-form-element">
  <span class="slds-form-element__label" id="file-selector-id">Attachment</span>
  <div class="slds-form-element__control">
    <div class="slds-file-selector slds-file-selector--files">
      <div class="slds-file-selector__dropzone">
        <input type="file" class="slds-file-selector__input slds-assistive-text" accept="image/png" id="file-upload-input-01" aria-describedby="file-selector-id" />
        <label class="slds-file-selector__body" for="file-upload-input-01">
          <span class="slds-file-selector__button slds-button slds-button--neutral">
            <svg class="slds-button__icon slds-button__icon--left" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#upload"></use>
            </svg>Upload Files</span>
          <span class="slds-file-selector__text slds-medium-show">or Drop Files</span>
        </label>
      </div>
    </div>
  </div>
</div>

ImageImage › DefaultImage › ErrorImage › DragoverImage › Dragover with errorImagedev ready

Preview

Code

<div class="slds-form-element">
  <span class="slds-form-element__label" id="file-selector-id">Attachment</span>
  <div class="slds-form-element__control">
    <div class="slds-file-selector slds-file-selector--images">
      <div class="slds-file-selector__dropzone">
        <input type="file" class="slds-file-selector__input slds-assistive-text" accept="image/png" id="file-upload-input-01" aria-describedby="file-selector-id" />
        <label class="slds-file-selector__body" for="file-upload-input-01">
          <span class="slds-file-selector__button slds-button slds-button--neutral">
            <svg class="slds-button__icon slds-button__icon--left" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#upload"></use>
            </svg>Upload Image</span>
          <span class="slds-file-selector__text slds-medium-show">or Drop Image</span>
        </label>
      </div>
    </div>
  </div>
</div>

IntegratedIntegrated › DefaultIntegrated › DragIntegrated › DragoverIntegrated › Dragover with errorIntegrateddev ready

Preview

Code

<div class="slds-file-selector slds-file-selector--integrated slds-file-selector--integrated">
  <div class="slds-file-selector__dropzone slds-file-selector__dropzone--integrated" aria-hidden="true">
    <input type="file" class="slds-file-selector__input slds-assistive-text" accept="image/png" id="file-upload-input-01" tabindex="-1" />
    <label class="slds-file-selector__body slds-file-selector__body--integrated" for="file-upload-input-01">
      <svg class="slds-file-selector__body-icon slds-icon slds-icon-text-default" aria-hidden="true">
        <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#upload"></use>
      </svg>
      <span class="slds-file-selector__text slds-file-selector__text--integrated slds-text-heading--medium slds-text-align--center">Drop Files</span>
    </label>
  </div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
  dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

Component Overview

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to this component.
Class NameUsage
.slds-file-selector
Applied to:

<div>

Outcome:

Initializes file-selector

Required:

Required

Comments:

--

.slds-file-selector__dropzone
Applied to:

Outcome:

Region that a file can be dropped within

Required:

Required

Comments:

--

.slds-file-selector__input
Applied to:

Outcome:

Hidden input element

Required:

Required

Comments:

Required for accessibility purposes

.slds-file-selector__body
Applied to:

Outcome:

Container for file selector content, specifically within the dropzone

Required:

Required

Comments:

--

.slds-file-selector__button
Applied to:

Outcome:

Faux button

Required:

Required

Comments:

--

.slds-file-selector__body-icon
Applied to:

Outcome:

Visual icon that describes state of dropzone

Required:

Required

Comments:

--

.slds-file-selector__text
Applied to:

Outcome:

Descriptive call back text

Required:

Required

Comments:

--

.slds-has-drag
Applied to:

Outcome:

Informs dropzone that file has been dragged into the viewport

Required:

Required

Comments:

To be added with JavaScript

.slds-has-drag-over
Applied to:

Outcome:

Informs dropzone that file has been dragged into its region

Required:

Required

Comments:

To be added with JavaScript

.slds-file-selector--files
Applied to:

Outcome:

Modifier for self contained files selector

Required:

Required

Comments:

--

.slds-file-selector--images
Applied to:

Outcome:

Modifier for self container image selector

Required:

Required

Comments:

--

.slds-file-selector--integrated
Applied to:

Outcome:

Modifier for integrated file selector

Required:

Required

Comments:

--

.slds-file-selector__dropzone--integrated
Applied to:

Outcome:

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

Required:

Required

Comments:

--

.slds-file-selector__body--integrated
Applied to:

Outcome:

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

Required:

Required

Comments:

--

.slds-file-selector__text--integrated
Applied to:

Outcome:

Specific to integrated file selector — Descriptive call back text

Required:

Required

Comments:

--