@carbon/charts 0.41.91 → 0.41.92

package/styles/vendor/carbon-components/src/components/file-uploader/_file-uploader.scss

@@ -30,89 +30,238 @@
   // TODO: sync with type
   .#{$prefix}--file--label {
     @include reset;
-    @include type-style('heading-01');
+    @include type-style('productive-heading-01');
 
-    color: $text-01;
     margin-bottom: $carbon--spacing-03;
+    color: $text-01;
+  }
+
+  .#{$prefix}--file--label--disabled {
+    color: $disabled-02;
   }
 
   .#{$prefix}--file-input {
     @include hidden;
   }
 
+  // This class is of old markup with "select file" button
+  // New code should use link-style "select file" UI (`.bx--file-browse-btn`)
+  // TODO: deprecate this block
   .#{$prefix}--file-btn {
     display: inline-flex;
-    margin: 0;
     padding-right: rem(64px);
+    margin: 0;
+  }
+
+  .#{$prefix}--file-browse-btn {
+    display: inline-block;
+    width: 100%;
+    max-width: rem(320px);
+    margin-bottom: $carbon--spacing-03;
+    color: $link-01;
+    cursor: pointer;
+    outline: 2px solid transparent;
+    outline-offset: -2px;
+    transition: $duration--fast-02 motion(standard, productive);
+
+    &:focus,
+    &:hover {
+      outline: 2px solid $interactive-03;
+    }
+
+    &:hover,
+    &:focus,
+    &:active,
+    &:active:visited {
+      text-decoration: underline;
+    }
+
+    &:active {
+      color: $text-01;
+    }
+  }
+
+  .#{$prefix}--file-browse-btn--disabled {
+    color: $disabled-02;
+    cursor: no-drop;
+    text-decoration: none;
+
+    &:hover,
+    &:focus {
+      color: $disabled-02;
+      outline: none;
+      text-decoration: none;
+    }
+  }
+
+  .#{$prefix}--file-browse-btn--disabled .#{$prefix}--file__drop-container {
+    border: 1px dashed $disabled-02;
   }
 
   .#{$prefix}--label-description {
     @include reset;
     @include type-style('body-short-01');
 
-    color: $text-02;
     margin-bottom: $carbon--spacing-05;
+    color: $text-02;
   }
 
-  .#{$prefix}--file-container {
-    display: block;
-    width: 100%;
+  .#{$prefix}--label-description--disabled {
+    color: $disabled-02;
+  }
+
+  // For backwards compatibility
+  .#{$prefix}--file-btn ~ .#{$prefix}--file-container {
     margin-top: $carbon--spacing-06;
   }
 
+  .#{$prefix}--btn ~ .#{$prefix}--file-container {
+    margin-top: $carbon--spacing-05;
+  }
+
+  .#{$prefix}--file .#{$prefix}--file-container,
+  .#{$prefix}--file ~ .#{$prefix}--file-container {
+    margin-top: $carbon--spacing-03;
+  }
+
   .#{$prefix}--file__selected-file {
-    display: flex;
+    display: grid;
+    max-width: rem(320px);
+    min-height: $carbon--spacing-09;
     align-items: center;
-    justify-content: space-between;
-    height: rem(40px);
-    max-width: rem(300px);
     margin-bottom: $carbon--spacing-03;
-    padding: 0 $carbon--spacing-03 0 $carbon--spacing-05;
     background-color: $field-01;
-    overflow: hidden;
+    gap: rem(12px) $carbon--spacing-05;
+    grid-auto-rows: auto;
+    grid-template-columns: 1fr auto;
+    word-break: break-word;
 
     &:last-child {
       margin-bottom: 0;
     }
 
-    .#{$prefix}--inline-loading__animation,
-    .#{$prefix}--loading {
-      right: -0.25rem; // offset for loading svg container
-      width: 1.5rem;
-      height: 1.5rem;
+    .#{$prefix}--form-requirement {
+      display: block;
+      max-height: none;
+      margin: 0;
+      grid-column: 1 / -1;
+    }
+
+    .#{$prefix}--inline-loading__animation .#{$prefix}--loading {
+      // Vanilla markup has `.bx--inline-loading__animation` which is used for `margin-right` adjustment
+      margin-right: 0;
     }
+
+    .#{$prefix}--file-filename {
+      @include type-style('body-short-01');
+
+      overflow: hidden;
+      margin-left: $carbon--spacing-05;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  // V11: Remove --field
+  .#{$prefix}--file__selected-file--field,
+  .#{$prefix}--file__selected-file--md {
+    min-height: rem(40px);
+    gap: $carbon--spacing-03 $carbon--spacing-05;
+  }
+
+  .#{$prefix}--file__selected-file--sm {
+    min-height: rem(32px);
+    gap: $carbon--spacing-02 $carbon--spacing-05;
+  }
+
+  // TODO: deprecate this block
+  .#{$prefix}--file__selected-file--invalid__wrapper {
+    @include focus-outline('invalid');
+
+    max-width: rem(320px);
+    margin-bottom: $carbon--spacing-03;
+    background-color: $field-01;
+    outline-width: 1px;
   }
 
   .#{$prefix}--file__selected-file--invalid {
     @include focus-outline('invalid');
-    margin-bottom: $carbon--spacing-02;
+
+    padding: rem(12px) 0;
+  }
+
+  .#{$prefix}--file__selected-file--invalid.#{$prefix}--file__selected-file--sm {
+    padding: $carbon--spacing-02 0;
+  }
+
+  // V11: Remove --field
+  .#{$prefix}--file__selected-file--invalid.#{$prefix}--file__selected-file--field,
+  .#{$prefix}--file__selected-file--invalid.#{$prefix}--file__selected-file--md {
+    padding: $carbon--spacing-03 0;
+  }
+
+  .#{$prefix}--file__selected-file--invalid .#{$prefix}--form-requirement {
+    padding-top: $carbon--spacing-05;
+    border-top: 1px solid $ui-03;
+  }
+
+  .#{$prefix}--file__selected-file--invalid.#{$prefix}--file__selected-file--sm
+    .#{$prefix}--form-requirement {
+    padding-top: rem(7px);
+  }
+
+  // V11: Remove --field
+  .#{$prefix}--file__selected-file--invalid.#{$prefix}--file__selected-file--field
+    .#{$prefix}--form-requirement,
+  .#{$prefix}--file__selected-file--invalid.#{$prefix}--file__selected-file--md
+    .#{$prefix}--form-requirement {
+    padding-top: rem(11px);
+  }
+
+  .#{$prefix}--file__selected-file--invalid
+    .#{$prefix}--form-requirement__title,
+  .#{$prefix}--file__selected-file--invalid
+    .#{$prefix}--form-requirement__supplement {
+    @include type-style('label-01');
+
+    padding: 0 $carbon--spacing-05;
   }
 
+  .#{$prefix}--file__selected-file--invalid
+    .#{$prefix}--form-requirement__title {
+    color: $text-error;
+  }
+
+  .#{$prefix}--file__selected-file--invalid
+    .#{$prefix}--form-requirement__supplement {
+    color: $text-01;
+  }
+
+  // TODO: deprecate
   .#{$prefix}--file__selected-file--invalid + .#{$prefix}--form-requirement {
+    @include type-style('caption-01');
+
     display: block;
+    overflow: visible;
     max-height: rem(200px);
-    color: $support-01;
+    padding: $carbon--spacing-03 $carbon--spacing-05;
+    color: $text-error;
     font-weight: 400;
-    margin: 0 0 $carbon--spacing-03 0;
-    overflow: visible;
   }
 
-  .#{$prefix}--file-filename {
-    @include type-style('body-short-01');
-    @include text-overflow(300px);
-    display: inline-block;
-    align-items: center;
+  .#{$prefix}--file__selected-file--invalid
+    + .#{$prefix}--form-requirement
+    .#{$prefix}--form-requirement__supplement {
+    padding-bottom: $carbon--spacing-03;
     color: $text-01;
-    margin-right: $carbon--spacing-05;
-    padding: 1px 0;
-    /*rtl:ignore*/
-    direction: ltr;
-    justify-content: flex-start; /*rtl:{flex-end}*/
   }
 
   .#{$prefix}--file__state-container {
     display: flex;
+    min-width: 1.5rem;
     align-items: center;
+    justify-content: center;
+    padding-right: $carbon--spacing-05;
 
     .#{$prefix}--loading__svg {
       stroke: $ui-05;
@@ -120,20 +269,77 @@
   }
 
   .#{$prefix}--file__state-container .#{$prefix}--file-complete {
-    fill: $support-02;
     cursor: pointer;
+    fill: $interactive-04;
 
     &:focus {
       @include focus-outline('border');
     }
+
+    // for checkmark contrast
+    [data-icon-path='inner-path'] {
+      fill: $icon-03;
+      opacity: 1;
+    }
+  }
+
+  .#{$prefix}--file__state-container .#{$prefix}--file-invalid {
+    width: $carbon--spacing-05;
+    height: $carbon--spacing-05;
+    fill: $support-01;
   }
 
   .#{$prefix}--file__state-container .#{$prefix}--file-close {
-    background: transparent;
+    display: flex;
+    width: $carbon--spacing-06;
+    height: $carbon--spacing-06;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
     border: none;
+    background-color: transparent;
     cursor: pointer;
-    padding: 0;
+    fill: $icon-01;
+
+    &:focus {
+      @include focus-outline('outline');
+    }
+  }
+
+  .#{$prefix}--file__state-container .#{$prefix}--file-close svg path {
+    fill: $icon-01;
+  }
+
+  .#{$prefix}--file__state-container .#{$prefix}--inline-loading__animation {
+    margin-right: -$carbon--spacing-03;
+  }
+
+  .#{$prefix}--file__drop-container {
+    display: flex;
+    overflow: hidden;
+    height: rem(96px);
+    align-items: flex-start;
+    justify-content: space-between;
+    padding: $carbon--spacing-05;
+    border: 1px dashed $ui-04;
+  }
+
+  .#{$prefix}--file__drop-container--drag-over {
+    background: none;
+    outline: 2px solid $interactive-03;
+    outline-offset: -2px;
+  }
+
+  // Windows HCM fix
+  /* stylelint-disable */
+  .#{$prefix}--file__selected-file {
+    @include high-contrast-mode('outline');
+  }
+
+  .#{$prefix}--file__state-container .#{$prefix}--file-close svg path {
+    @include high-contrast-mode('icon-fill');
   }
+  /* stylelint-enable */
 }
 
 @include exports('file-uploader') {

package/styles/vendor/carbon-components/src/components/file-uploader/file-uploader.hbs

@@ -5,46 +5,99 @@
   LICENSE file in the root directory of this source tree.
 -->
 
-<div class="{{@root.prefix}}--form-item">
-  <strong class="{{@root.prefix}}--file--label">Account
+{{#unless legacy}}
+<div class="{{prefix}}--form-item">
+  <strong class="{{prefix}}--file--label">Account
     photo</strong>
-  <p class="{{@root.prefix}}--label-description">Only .jpg and .png files. 500kb max file size.</p>
-  <div class="{{@root.prefix}}--file" data-file>
-    <label for="your-file-importer-id-here"
-      class="{{@root.prefix}}--file-btn {{@root.prefix}}--btn {{@root.prefix}}--btn--primary"
+  <p class="{{prefix}}--label-description">Only .jpg and .png files. 500kb max file size.</p>
+  <div class="{{prefix}}--file" data-file data-file-demo-state-manager>
+    <label for="{{id}}" class="{{prefix}}--file-browse-btn" role="button" tabindex="0">
+      <div data-file-drop-container class="{{prefix}}--file__drop-container">
+        Drag and drop files here or
+        upload
+        <input type="file" class="{{prefix}}--file-input" id="{{id}}" data-file-uploader
+          data-target="[data-file-container]" multiple />
+      </div>
+    </label>
+    <div data-file-container class="{{prefix}}--file-container">
+      {{#if exampleUploadStates}}
+      <div class="{{prefix}}--file__selected-file">
+        <p class="{{prefix}}--file-filename">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero vero
+          sapiente illum reprehenderit molestiae perferendis voluptatem temporibus laudantium ducimus magni voluptatum
+          veniam, odit nesciunt corporis numquam maxime sunt excepturi sint!</p>
+        <span data-for="{{id}}" class="{{prefix}}--file__state-container">
+          {{ carbon-icon 'CheckmarkFilled16' class=(add prefix '--file-complete') }}
+        </span>
+      </div>
+      <div class="{{prefix}}--file__selected-file {{prefix}}--file__selected-file--invalid" data-invalid>
+        <p class="{{prefix}}--file-filename">color.jpeg</p>
+        <span data-for="{{id}}" class="{{prefix}}--file__state-container">
+          {{ carbon-icon 'WarningFilled16' class=(add prefix '--file--invalid')}}
+          {{ carbon-icon 'Close16' class=(add prefix '--file-close') aria-label="Remove uploaded file" tabindex="0" }}
+        </span>
+        <div class="{{prefix}}--form-requirement">
+          <div class="{{prefix}}--form-requirement__title">File size exceeds limit.</div>
+          <p class="{{prefix}}--form-requirement__supplement">500 kb max file size. Select a new file and try
+            again.</p>
+        </div>
+      </div>
+      <div class="{{prefix}}--file__selected-file">
+        <p class="{{prefix}}--file-filename">color.jpeg</p>
+        <span data-for="{{id}}" class="{{prefix}}--file__state-container">
+          <div class="{{prefix}}--inline-loading__animation">
+            <div data-inline-loading-spinner="" class="{{prefix}}--loading {{prefix}}--loading--small">
+              <svg class="{{prefix}}--loading__svg" viewBox="-75 -75 150 150">
+                <circle class="{{prefix}}--loading__background" cx="0" cy="0" r="26.8125"></circle>
+                <circle class="{{prefix}}--loading__stroke" cx="0" cy="0" r="26.8125"></circle>
+              </svg>
+            </div>
+          </div>
+        </span>
+      </div>
+      {{/if}}
+    </div>
+  </div>
+</div>
+{{else}}
+<div class="{{prefix}}--form-item">
+  <strong class="{{prefix}}--file--label">Account
+    photo</strong>
+  <p class="{{prefix}}--label-description">Only .jpg and .png files. 500kb max file size.</p>
+  <div class="{{prefix}}--file" data-file data-file-demo-state-manager>
+    <label for="legacy-file-uploader" class="{{prefix}}--file-btn {{prefix}}--btn {{prefix}}--btn--primary"
       role="button" tabindex="0">Add file</label>
-    <input type="file" class="{{@root.prefix}}--file-input" id="your-file-importer-id-here" data-file-uploader
+    <input type="file" class="{{prefix}}--file-input" id="legacy-file-uploader" data-file-uploader
       data-target="[data-file-container]" multiple />
-    <div data-file-container class="{{@root.prefix}}--file-container">
+    <div data-file-container data-file-drop-container class="{{prefix}}--file-container">
       {{#if exampleUploadStates}}
-      <div class="{{@root.prefix}}--file__selected-file">
-        <p class="{{@root.prefix}}--file-filename">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero vero
+      <div class="{{prefix}}--file__selected-file">
+        <p class="{{prefix}}--file-filename">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero vero
           sapiente illum reprehenderit molestiae perferendis voluptatem temporibus laudantium ducimus magni voluptatum
           veniam, odit nesciunt corporis numquam maxime sunt excepturi sint!</p>
-        <span data-for="your-file-importer-id-here" class="{{@root.prefix}}--file__state-container">
-          {{ carbon-icon 'CheckmarkFilled16' class=(add @root.prefix '--file-complete') }}
+        <span data-for="{{id}}" class="{{prefix}}--file__state-container">
+          {{ carbon-icon 'CheckmarkFilled16' class=(add prefix '--file-complete') }}
         </span>
       </div>
-      <div class="{{@root.prefix}}--file__selected-file--invalid__wrapper">
-        <div class="{{@root.prefix}}--file__selected-file {{@root.prefix}}--file__selected-file--invalid" data-invalid>
-          <p class="{{@root.prefix}}--file-filename">color.jpeg</p>
-          <span data-for="your-file-importer-id-here" class="{{@root.prefix}}--file__state-container">
-            {{ carbon-icon 'WarningFilled16' class=(add @root.prefix '--file--invalid')}}
-            {{ carbon-icon 'Close16' class=(add @root.prefix '--file--close') }}
-          </span>
-        </div>
-        <div class="{{@root.prefix}}--form-requirement">
-          File size exceeds limit
+      <div class="{{prefix}}--file__selected-file {{prefix}}--file__selected-file--invalid" data-invalid>
+        <p class="{{prefix}}--file-filename">color.jpeg</p>
+        <span data-for="{{id}}" class="{{prefix}}--file__state-container">
+          {{ carbon-icon 'WarningFilled16' class=(add prefix '--file--invalid')}}
+          {{ carbon-icon 'Close16' class=(add prefix '--file-close') aria-label="Remove uploaded file" tabindex="0" }}
+        </span>
+        <div class="{{prefix}}--form-requirement">
+          <div class="{{prefix}}--form-requirement__title">File size exceeds limit.</div>
+          <p class="{{prefix}}--form-requirement__supplement">500 kb max file size. Select a new file and try
+            again.</p>
         </div>
       </div>
-      <div class="{{@root.prefix}}--file__selected-file">
-        <p class="{{@root.prefix}}--file-filename">color.jpeg</p>
-        <span data-for="your-file-importer-id-here" class="{{@root.prefix}}--file__state-container">
-          <div class="{{@root.prefix}}--inline-loading__animation">
-            <div data-inline-loading-spinner="" class="{{@root.prefix}}--loading {{@root.prefix}}--loading--small">
-              <svg class="{{@root.prefix}}--loading__svg" viewBox="-75 -75 150 150">
-                <circle class="{{@root.prefix}}--loading__background" cx="0" cy="0" r="37.5"></circle>
-                <circle class="{{@root.prefix}}--loading__stroke" cx="0" cy="0" r="37.5"></circle>
+      <div class="{{prefix}}--file__selected-file">
+        <p class="{{prefix}}--file-filename">color.jpeg</p>
+        <span data-for="{{id}}" class="{{prefix}}--file__state-container">
+          <div class="{{prefix}}--inline-loading__animation">
+            <div data-inline-loading-spinner="" class="{{prefix}}--loading {{prefix}}--loading--small">
+              <svg class="{{prefix}}--loading__svg" viewBox="-75 -75 150 150">
+                <circle class="{{prefix}}--loading__background" cx="0" cy="0" r="26.8125"></circle>
+                <circle class="{{prefix}}--loading__stroke" cx="0" cy="0" r="26.8125"></circle>
               </svg>
             </div>
           </div>
@@ -54,3 +107,4 @@
     </div>
   </div>
 </div>
+{{/unless}}

package/styles/vendor/carbon-components/src/components/file-uploader/file-uploader.js

@@ -14,7 +14,7 @@ import handles from '../../globals/js/mixins/handles';
 import eventMatches from '../../globals/js/misc/event-matches';
 import on from '../../globals/js/misc/on';
 
-const toArray = arrayLike => Array.prototype.slice.call(arrayLike);
+const toArray = (arrayLike) => Array.prototype.slice.call(arrayLike);
 
 class FileUploader extends mixin(
   createComponent,
@@ -35,6 +35,9 @@ class FileUploader extends mixin(
     super(element, options);
     this.input = this.element.querySelector(this.options.selectorInput);
     this.container = this.element.querySelector(this.options.selectorContainer);
+    this.dropContainer = this.element.querySelector(
+      this.options.selectorDropContainer
+    );
 
     if (!this.input) {
       throw new TypeError('Cannot find the file input box.');
@@ -47,6 +50,11 @@ class FileUploader extends mixin(
     this.inputId = this.input.getAttribute('id');
     this.manage(on(this.input, 'change', () => this._displayFilenames()));
     this.manage(on(this.container, 'click', this._handleDeleteButton));
+    this.manage(
+      on(this.element.ownerDocument, 'dragleave', this._handleDragDrop)
+    );
+    this.manage(on(this.dropContainer, 'dragover', this._handleDragDrop));
+    this.manage(on(this.dropContainer, 'drop', this._handleDragDrop));
   }
 
   _filenamesHTML(name, id) {
@@ -58,10 +66,13 @@ class FileUploader extends mixin(
 
   _uploadHTML() {
     return `
-      <div data-loading class="${this.options.classLoading}">
-        <svg class="${this.options.classLoadingSvg}" viewBox="-42 -42 84 84">
-          <circle cx="0" cy="0" r="37.5" />
-        </svg>
+      <div class="${this.options.classLoadingAnimation}">
+        <div data-inline-loading-spinner class="${this.options.classLoading}">
+          <svg class="${this.options.classLoadingSvg}" viewBox="-75 -75 150 150">
+            <circle class="${this.options.classLoadingBackground}" cx="0" cy="0" r="37.5" />
+            <circle class="${this.options.classLoadingStroke}" cx="0" cy="0" r="37.5" />
+          </svg>
+        </div>
       </div>`;
   }
 
@@ -76,9 +87,17 @@ class FileUploader extends mixin(
 
   _checkmarkHTML() {
     return `
-      <svg class="${this.options.classFileComplete}" viewBox="0 0 16 16" fill-rule="evenodd" width="16" height="16">
-       <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM6.7 11.5L3.4 8.1l1.4-1.4 1.9 1.9 4.1-4.1 1.4 1.4-5.5 5.6z"/>
-      </svg>`;
+      <svg focusable="false"
+        preserveAspectRatio="xMidYMid meet"
+        style="will-change: transform;"
+        xmlns="http://www.w3.org/2000/svg"
+        class="${this.options.classFileComplete}"
+        width="16" height="16" viewBox="0 0 16 16"
+        aria-hidden="true">
+        <path d="M8 1C4.1 1 1 4.1 1 8s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7zM7 11L4.3 8.3l.9-.8L7 9.3l4-3.9.9.8L7 11z"></path>
+        <path d="M7 11L4.3 8.3l.9-.8L7 9.3l4-3.9.9.8L7 11z" data-icon-path="inner-path" opacity="0"></path>
+      </svg>
+    `;
   }
 
   _changeState = (state, detail, callback) => {
@@ -110,13 +129,14 @@ class FileUploader extends mixin(
 
   /**
    * Inject selected files into DOM. Invoked on change event.
+   * @param {File[]} files The files to upload.
    */
-  _displayFilenames() {
+  _displayFilenames(files = this.input.files) {
     const container = this.element.querySelector(
       this.options.selectorContainer
     );
-    const HTMLString = toArray(this.input.files)
-      .map(file => this._filenamesHTML(file.name, this.inputId))
+    const HTMLString = toArray(files)
+      .map((file) => this._filenamesHTML(file.name, this.inputId))
       .join('');
 
     container.insertAdjacentHTML('afterbegin', HTMLString);
@@ -135,7 +155,7 @@ class FileUploader extends mixin(
 
   _handleStateChange(elements, selectIndex, html) {
     if (selectIndex === undefined) {
-      elements.forEach(el => {
+      elements.forEach((el) => {
         this._removeState(el);
         el.insertAdjacentHTML('beforeend', html);
       });
@@ -154,16 +174,54 @@ class FileUploader extends mixin(
    * @param {Event} evt The event triggering this action.
    * @private
    */
-  _handleDeleteButton = evt => {
-    const target = eventMatches(evt, `[data-for=${this.inputId}]`);
+  _handleDeleteButton = (evt) => {
+    const target = eventMatches(evt, this.options.selectorCloseButton);
     if (target) {
-      this._changeState('delete-filename-fileuploader', {
+      this.changeState('delete-filename-fileuploader', {
         initialEvt: evt,
-        filenameElement: target.parentNode,
+        filenameElement: target.closest(this.options.selectorSelectedFile),
       });
     }
   };
 
+  /**
+   * Handles drag/drop event.
+   * @param {MouseEvent} evt The event.
+   * @private
+   */
+  _handleDragDrop = (evt) => {
+    const isOfSelf = this.element.contains(evt.target);
+    // In IE11 `evt.dataTransfer.types` is a `DOMStringList` instead of an array
+    if (
+      Array.prototype.indexOf.call(evt.dataTransfer.types, 'Files') >= 0 &&
+      !eventMatches(evt, this.options.selectorOtherDropContainers)
+    ) {
+      const inArea =
+        isOfSelf && eventMatches(evt, this.options.selectorDropContainer);
+      if (evt.type === 'dragover') {
+        evt.preventDefault();
+        const dropEffect = inArea ? 'copy' : 'none';
+        if (Array.isArray(evt.dataTransfer.types)) {
+          // IE11 throws a "permission denied" error accessing `.effectAllowed`
+          evt.dataTransfer.effectAllowed = dropEffect;
+        }
+        evt.dataTransfer.dropEffect = dropEffect;
+        this.dropContainer.classList.toggle(
+          this.options.classDragOver,
+          Boolean(inArea)
+        );
+      }
+      if (evt.type === 'dragleave') {
+        this.dropContainer.classList.toggle(this.options.classDragOver, false);
+      }
+      if (inArea && evt.type === 'drop') {
+        evt.preventDefault();
+        this._displayFilenames(evt.dataTransfer.files);
+        this.dropContainer.classList.remove(this.options.classDragOver);
+      }
+    }
+  };
+
   setState(state, selectIndex) {
     const stateContainers = this._getStateContainers();
 
@@ -202,13 +260,20 @@ class FileUploader extends mixin(
       selectorInput: `input[type="file"].${prefix}--file-input`,
       selectorContainer: '[data-file-container]',
       selectorCloseButton: `.${prefix}--file-close`,
-      classLoading: `${prefix}--loading`,
+      selectorSelectedFile: `.${prefix}--file__selected-file`,
+      selectorDropContainer: `[data-file-drop-container]`,
+      selectorOtherDropContainers: '[data-drop-container]',
+      classLoading: `${prefix}--loading ${prefix}--loading--small`,
+      classLoadingAnimation: `${prefix}--inline-loading__animation`,
       classLoadingSvg: `${prefix}--loading__svg`,
+      classLoadingBackground: `${prefix}--loading__background`,
+      classLoadingStroke: `${prefix}--loading__stroke`,
       classFileName: `${prefix}--file-filename`,
       classFileClose: `${prefix}--file-close`,
       classFileComplete: `${prefix}--file-complete`,
       classSelectedFile: `${prefix}--file__selected-file`,
       classStateContainer: `${prefix}--file__state-container`,
+      classDragOver: `${prefix}--file__drop-container--drag-over`,
       eventBeforeDeleteFilenameFileuploader:
         'fileuploader-before-delete-filename',
       eventAfterDeleteFilenameFileuploader: