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

About File Selector

Accessibility

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

Markup

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

Base

Attachment
<div class="slds-form-element">
  <span class="slds-form-element__label" id="file-selector-primary-label">Attachment</span>
  <div class="slds-form-element__control">

States

Error

Attachment
File type not supported
<div class="slds-form-element slds-has-error">
  <span class="slds-form-element__label" id="file-selector-primary-label">Attachment</span>
  <div class="slds-form-element__control">

Dragover

Attachment
<div class="slds-form-element">
  <span class="slds-form-element__label" id="file-selector-primary-label">Attachment</span>
  <div class="slds-form-element__control">

Dragover with error

Attachment
File type not supported
<div class="slds-form-element slds-has-error">
  <span class="slds-form-element__label" id="file-selector-primary-label">Attachment</span>
  <div class="slds-form-element__control">

Image

Multi Line / Image

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

Attachment
<div class="demo-only" style="max-width:320px">
  <div class="slds-form-element">
    <span class="slds-form-element__label" id="file-selector-primary-label">Attachment</span>

States

Error

Attachment
File type not supported
<div class="demo-only" style="max-width:320px">
  <div class="slds-form-element slds-has-error">
    <span class="slds-form-element__label" id="file-selector-primary-label">Attachment</span>

Dragover

Attachment
<div class="demo-only" style="max-width:320px">
  <div class="slds-form-element">
    <span class="slds-form-element__label" id="file-selector-primary-label">Attachment</span>

Dragover with error

Attachment
File type not supported
<div class="demo-only" style="max-width:320px">
  <div class="slds-form-element slds-has-error">
    <span class="slds-form-element__label" id="file-selector-primary-label">Attachment</span>

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.

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 class="demo-only" style="width:320px;height:320px">
  <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">

States

Drag

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 class="demo-only" style="width:320px;height:320px">
  <div class="slds-file-selector slds-file-selector_integrated slds-file-selector_integrated">
    <div class="slds-file-selector__dropzone slds-file-selector__dropzone_integrated slds-has-drag" aria-hidden="true">

Dragover

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 class="demo-only" style="width:320px;height:320px">
  <div class="slds-file-selector slds-file-selector_integrated slds-file-selector_integrated">
    <div class="slds-file-selector__dropzone slds-file-selector__dropzone_integrated slds-has-drag slds-has-drag-over" aria-hidden="true">

Dragover with error

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 class="demo-only" style="width:320px;height:320px">
  <div class="slds-file-selector slds-file-selector_integrated slds-file-selector_integrated">
    <div class="slds-file-selector__dropzone slds-file-selector__dropzone_integrated slds-has-drag" aria-hidden="true">