New single drag and drop single FileUploader

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -3461,6 +3461,9 @@ Map {
       "onDelete": Object {
         "type": "func",
       },
+      "singleUpload": Object {
+        "type": "bool",
+      },
       "size": Object {
         "args": Array [
           Array [

packages/react/src/components/FileUploader/FileUploader.stories.js

@@ -154,6 +154,21 @@ DragAndDropUploadContainerExampleApplication.argTypes = {
   onChange: { action: 'onChange' },
 };
 
+export const DragAndDropUploadSingleContainerExampleApplication = (args) =>
+  require('./stories/drag-and-drop-single').default(args);
+
+DragAndDropUploadSingleContainerExampleApplication.args = {
+  labelText: 'Drag and drop a file here or click to upload',
+  name: '',
+  multiple: false,
+  accept: ['image/jpeg', 'image/png'],
+  disabled: false,
+  tabIndex: 0,
+};
+DragAndDropUploadSingleContainerExampleApplication.argTypes = {
+  onChange: { action: 'onChange' },
+};
+
 export const Skeleton = () => (
   <div style={{ width: '500px' }}>
     <FileUploaderSkeleton />

packages/react/src/components/FileUploader/FileUploaderItem.tsx

@@ -7,12 +7,14 @@
 
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useRef } from 'react';
+import React, { useLayoutEffect, useRef, useState } from 'react';
 import Filename from './Filename';
 import { keys, matches } from '../../internal/keyboard';
 import uid from '../../tools/uniqueId';
 import { usePrefix } from '../../internal/usePrefix';
 import { ReactAttr } from '../../types/common';
+import FileUploaderButton from './FileUploaderButton';
+import { Tooltip } from '../Tooltip';
 
 export interface FileUploaderItemProps extends ReactAttr<HTMLSpanElement> {
   /**
@@ -40,6 +42,11 @@ export interface FileUploaderItemProps extends ReactAttr<HTMLSpanElement> {
    */
   name?: string;
 
+  /**
+   * Event handler that is called after files are added to the uploader
+   */
+  onAddFiles?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+
   /**
    * Event handler that is called after removing a file from the file uploader
    * The event handler signature looks like `onDelete(evt, { uuid })`
@@ -49,6 +56,11 @@ export interface FileUploaderItemProps extends ReactAttr<HTMLSpanElement> {
     opts: { uuid: string }
   ) => void;
 
+  /**
+     Specify if the uploader will accept only one file
+    */
+  singleUpload?: boolean;
+
   /**
    * Specify the size of the FileUploaderButton, from a list of available
    * sizes.
@@ -71,47 +83,91 @@ function FileUploaderItem({
   name,
   status = 'uploading',
   iconDescription,
+  onAddFiles = () => {},
   onDelete = () => {},
   invalid,
   errorSubject,
   errorBody,
   size,
+  singleUpload,
   ...other
 }: FileUploaderItemProps) {
+  const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
   const prefix = usePrefix();
   const { current: id } = useRef(uuid || uid());
   const classes = cx(`${prefix}--file__selected-file`, {
     [`${prefix}--file__selected-file--invalid`]: invalid,
     [`${prefix}--file__selected-file--md`]: size === 'md',
     [`${prefix}--file__selected-file--sm`]: size === 'sm',
   });
+  const isInvalid = invalid
+    ? `${prefix}--file-filename-container-wrap-invalid`
+    : `${prefix}--file-filename-container-wrap`;
+
+  const isEllipsisActive = (element: any) => {
+    setIsEllipsisApplied(element.offsetWidth < element.scrollWidth);
+    return element.offsetWidth < element.scrollWidth;
+  };
+
+  useLayoutEffect(() => {
+    const element = document.querySelector(`.${prefix}--file-filename`);
+    isEllipsisActive(element);
+  }, [prefix, name]);
+
   return (
     <span className={classes} {...other}>
-      <p className={`${prefix}--file-filename`} title={name} id={name}>
-        {name}
-      </p>
-      <span className={`${prefix}--file__state-container`}>
-        <Filename
-          name={name}
-          iconDescription={iconDescription}
-          status={status}
-          invalid={invalid}
-          aria-describedby={`${name}-id-error`}
-          onKeyDown={(evt) => {
-            if (matches(evt as unknown as Event, [keys.Enter, keys.Space])) {
+      {isEllipsisApplied && singleUpload ? (
+        <div className={isInvalid}>
+          <Tooltip
+            label={name}
+            align="bottom"
+            className={`${prefix}--file-filename-tooltip`}>
+            <button className={`${prefix}--file-filename-button`} type="button">
+              <p title={name} className={`${prefix}--file-filename`} id={name}>
+                {name}
+              </p>
+            </button>
+          </Tooltip>
+        </div>
+      ) : (
+        <p title={name} className={`${prefix}--file-filename`} id={name}>
+          {name}
+        </p>
+      )}
+
+      <div className={`${prefix}--file-container-item`}>
+        {singleUpload && (
+          <FileUploaderButton
+            buttonKind="ghost"
+            labelText="Replace"
+            disabled={false}
+            onChange={onAddFiles}
+            disableLabelChanges={singleUpload}
+          />
+        )}
+        <span className={`${prefix}--file__state-container`}>
+          <Filename
+            name={name}
+            iconDescription={iconDescription}
+            status={status}
+            invalid={invalid}
+            aria-describedby={`${name}-id-error`}
+            onKeyDown={(evt) => {
+              if (matches(evt as unknown as Event, [keys.Enter, keys.Space])) {
+                if (status === 'edit') {
+                  evt.preventDefault();
+                  onDelete(evt, { uuid: id });
+                }
+              }
+            }}
+            onClick={(evt) => {
               if (status === 'edit') {
-                evt.preventDefault();
                 onDelete(evt, { uuid: id });
               }
-            }
-          }}
-          onClick={(evt) => {
-            if (status === 'edit') {
-              onDelete(evt, { uuid: id });
-            }
-          }}
-        />
-      </span>
+            }}
+          />
+        </span>
+      </div>
       {invalid && errorSubject && (
         <div
           className={`${prefix}--form-requirement`}
@@ -163,6 +219,11 @@ FileUploaderItem.propTypes = {
    */
   onDelete: PropTypes.func,
 
+  /**
+     Specify if the uploader will accept only one file
+    */
+  singleUpload: PropTypes.bool,
+
   /**
    * Specify the size of the FileUploaderButton, from a list of available
    * sizes.

packages/react/src/components/FileUploader/Filename.tsx

@@ -59,7 +59,12 @@ function Filename({
   switch (status) {
     case 'uploading':
       return (
-        <Loading description={iconDescription} small withOverlay={false} />
+        <Loading
+          description={iconDescription}
+          small
+          withOverlay={false}
+          className={`${prefix}--file-loading`}
+        />
       );
     case 'edit':
       return (

packages/react/src/components/FileUploader/__tests__/FileUploaderItem-test.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { getByLabel, getByText } from '@carbon/test-utils/dom';
 import React from 'react';
 import { Simulate } from 'react-dom/test-utils';
@@ -75,4 +75,18 @@ describe('FileUploaderItem', () => {
     Simulate.keyDown(removeFile, keys.Space);
     expect(onDelete).not.toHaveBeenCalled();
   });
+
+  it('should enable the replace button when the singleUpload prop is true', () => {
+    render(
+      <FileUploaderItem
+        uuid="edit"
+        name="edit"
+        iconDescription="description"
+        status="edit"
+        singleUpload
+      />
+    );
+
+    expect(screen.getByLabelText('Replace')).toBeInTheDocument();
+  });
 });