feat: Adds two versions of dropzone

pages/file-token-group/permutations.page.tsx

@@ -9,7 +9,7 @@ import PermutationsView from '../utils/permutations-view';
 import ScreenshotArea from '../utils/screenshot-area';
 
 const file1 = new File([new Blob(['demo content 1'])], 'demo file 1', { type: 'image/*' });
-const file2 = new File([new Blob(['demo content 2'])], 'demo file 2', { type: 'image/*' });
+const file2 = new File([new Blob(['demo content 2'])], 'demo file 2 long name here test', { type: 'image/*' });
 
 const permutations = createPermutations<Omit<FileTokenGroupProps, 'onDismiss' | 'i18nStrings'>>([
   {

pages/file-upload/deconstructed.page.tsx

@@ -1,6 +1,7 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React, { useEffect, useRef, useState } from 'react';
+import clsx from 'clsx';
 
 import { Box, Checkbox, FileInput, FileTokenGroup, FileUploadProps, FormField, Header, PromptInput } from '~components';
 import SpaceBetween from '~components/space-between';
@@ -10,6 +11,53 @@ import { i18nStrings } from './shared';
 import { useDropzoneVisible } from './use-dropzone-visible';
 import { validateContractFiles } from './validations';
 
+import styles from './styles.scss';
+
+interface DropzoneProps {
+  onChange: (files: File[]) => void;
+  children: React.ReactNode;
+}
+
+export function Dropzone({ onChange, children }: DropzoneProps) {
+  const [isDropzoneHovered, setDropzoneHovered] = useState(false);
+
+  const onDragOver = (event: React.DragEvent) => {
+    event.preventDefault();
+
+    if (event.dataTransfer) {
+      setDropzoneHovered(true);
+      event.dataTransfer.dropEffect = 'copy';
+    }
+  };
+
+  const onDragLeave = (event: React.DragEvent) => {
+    event.preventDefault();
+    setDropzoneHovered(false);
+
+    if (event.dataTransfer) {
+      event.dataTransfer.dropEffect = 'none';
+    }
+  };
+
+  const onDrop = (event: React.DragEvent) => {
+    event.preventDefault();
+    setDropzoneHovered(false);
+
+    onChange(Array.from(event.dataTransfer.files));
+  };
+
+  return (
+    <div
+      className={clsx(styles.dropzone, isDropzoneHovered && styles['dropzone-hovered'])}
+      onDragOver={onDragOver}
+      onDragLeave={onDragLeave}
+      onDrop={onDrop}
+    >
+      <span>{children}</span>
+    </div>
+  );
+}
+
 export default function FileUploadScenarioStandalone() {
   const contractsRef = useRef<FileUploadProps.Ref>(null);
   const [textareaValue, setTextareaValue] = useState('');
@@ -44,27 +92,30 @@ export default function FileUploadScenarioStandalone() {
 
   return (
     <Box margin="xl">
-      {isDropzoneVisible ? (
-        'dropping files'
-      ) : (
-        <SpaceBetween size="xl">
-          <Header variant="h1">File upload: deconstructed</Header>
-
-          <Checkbox checked={acceptMultiple} onChange={(event: any) => setAcceptMultiple(event.detail.checked)}>
-            Accept multiple files
-          </Checkbox>
-          <Checkbox checked={verticalAlign} onChange={(event: any) => setVerticalAlign(event.detail.checked)}>
-            Vertical alignment
-          </Checkbox>
-
-          <FormField>
+      <SpaceBetween size="xl">
+        <Header variant="h1">File upload: deconstructed</Header>
+
+        <Checkbox checked={acceptMultiple} onChange={(event: any) => setAcceptMultiple(event.detail.checked)}>
+          Accept multiple files
+        </Checkbox>
+        <Checkbox checked={verticalAlign} onChange={(event: any) => setVerticalAlign(event.detail.checked)}>
+          Vertical alignment
+        </Checkbox>
+
+        <FormField>
+          {isDropzoneVisible ? (
+            <Dropzone onChange={handleFilesChange}>dropping files</Dropzone>
+          ) : (
             <PromptInput
               ariaLabel="Chat input"
               actionButtonIconName="send"
               actionButtonAriaLabel="Submit prompt"
               value={textareaValue}
               onChange={(event: any) => setTextareaValue(event.detail.value)}
               onAction={(event: any) => window.alert(`Submitted the following: ${event.detail.value}`)}
+              // onFilesChange={(event: any) => handleFilesChange(event.detail.value)}
+              // files={formState.files}
+              // multiple={acceptMultiple}
               placeholder="Ask a question"
               maxRows={4}
               disableSecondaryActionsPaddings={true}
@@ -99,38 +150,38 @@ export default function FileUploadScenarioStandalone() {
                 ) : undefined
               }
             />
-          </FormField>
-
-          <FormField
-            label={acceptMultiple ? 'Contracts' : 'Contract'}
-            description={acceptMultiple ? 'Upload your contract with all amendments' : 'Upload your contract'}
-          >
-            <FileInput
-              variant="icon"
-              ref={contractsRef}
-              multiple={acceptMultiple}
-              value={formState.files}
-              onChange={(event: any) => handleFilesChange(event.detail.value)}
-              //   accept="application/pdf, image/*"
-              i18nStrings={i18nStrings}
-            />
-          </FormField>
-
-          <FileTokenGroup
-            alignment={verticalAlign ? 'vertical' : 'horizontal'}
-            items={formState.files.map(file => ({
-              file,
-              loading: formState.status === 'uploading',
-              errorText: file.size > 5000000 ? 'File size cannot exceed 5MB' : undefined,
-            }))}
-            showFileLastModified={true}
-            showFileSize={true}
-            showFileThumbnail={true}
+          )}
+        </FormField>
+
+        <FormField
+          label={acceptMultiple ? 'Contracts' : 'Contract'}
+          description={acceptMultiple ? 'Upload your contract with all amendments' : 'Upload your contract'}
+        >
+          <FileInput
+            variant="icon"
+            ref={contractsRef}
+            multiple={acceptMultiple}
+            value={formState.files}
+            onChange={(event: any) => handleFilesChange(event.detail.value)}
+            //   accept="application/pdf, image/*"
             i18nStrings={i18nStrings}
-            onDismiss={onDismiss}
           />
-        </SpaceBetween>
-      )}
+        </FormField>
+
+        <FileTokenGroup
+          alignment={verticalAlign ? 'vertical' : 'horizontal'}
+          items={formState.files.map(file => ({
+            file,
+            loading: formState.status === 'uploading',
+            errorText: file.size > 5000000 ? 'File size cannot exceed 5MB' : undefined,
+          }))}
+          // showFileLastModified={true}
+          // showFileSize={true}
+          showFileThumbnail={true}
+          i18nStrings={i18nStrings}
+          onDismiss={onDismiss}
+        />
+      </SpaceBetween>
     </Box>
   );
 }

pages/file-upload/styles.scss

@@ -0,0 +1,27 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '~design-tokens' as awsui;
+
+.dropzone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: awsui.$space-static-xxs;
+  padding-block: awsui.$space-static-l;
+  padding-inline: awsui.$space-static-l;
+  border-start-start-radius: 2px;
+  border-start-end-radius: 2px;
+  border-end-start-radius: 2px;
+  border-end-end-radius: 2px;
+  font-weight: awsui.$font-weight-heading-m;
+  color: awsui.$color-text-button-normal-active;
+  background-color: awsui.$color-background-cell-shaded;
+  &-hovered {
+    color: awsui.$color-text-button-normal-active;
+    background-color: awsui.$color-background-button-normal-hover;
+  }
+}

src/file-token-group/file-token.tsx

@@ -68,6 +68,7 @@ function InternalFileToken({
 
   const containerRef = React.useRef<HTMLDivElement>(null);
   const [showTooltip, setShowTooltip] = useState(false);
+  const [imageError, setImageError] = useState(false);
 
   return (
     <div
@@ -94,11 +95,11 @@ function InternalFileToken({
         warningIconAriaLabel={i18nStrings.warningIconAriaLabel}
         disabled={disabled}
         alignment={alignment}
-        groupContainsImage={groupContainsImage && showFileThumbnail && alignment === 'horizontal'}
+        groupContainsImage={groupContainsImage && showFileThumbnail && alignment === 'horizontal' && !imageError}
         data-index={index}
       >
         <InternalBox className={styles['file-option']}>
-          {showFileThumbnail && isImage && <FileOptionThumbnail file={file} />}
+          {showFileThumbnail && isImage && <FileOptionThumbnail file={file} setHasError={setImageError} />}
 
           <div
             className={clsx(styles['file-option-metadata'], {

src/file-token-group/thumbnail.tsx

@@ -7,9 +7,10 @@ import styles from './styles.css.js';
 
 interface FileOptionThumbnailProps {
   file: File;
+  setHasError: (hasError: boolean) => void;
 }
 
-export function FileOptionThumbnail({ file }: FileOptionThumbnailProps) {
+export function FileOptionThumbnail({ file, setHasError }: FileOptionThumbnailProps) {
   const [imageSrc, setImageSrc] = useState('');
 
   useEffect(() => {
@@ -26,7 +27,15 @@ export function FileOptionThumbnail({ file }: FileOptionThumbnailProps) {
 
   return (
     <div className={styles['file-option-thumbnail']} aria-hidden={true}>
-      <img className={styles['file-option-thumbnail-image']} alt={file.name} src={imageSrc} />
+      <img
+        className={styles['file-option-thumbnail-image']}
+        alt={file.name}
+        src={imageSrc}
+        onError={({ currentTarget }) => {
+          setHasError(true);
+          currentTarget.onerror = null; // prevents looping
+        }}
+      />
     </div>
   );
 }

src/file-upload/internal.tsx

@@ -10,6 +10,7 @@ import InternalBox from '../box/internal';
 import { ButtonProps } from '../button/interfaces';
 import { useFormFieldContext } from '../contexts/form-field';
 import InternalFileInput from '../file-input/internal';
+import * as defaultFormatters from '../file-token-group/default-formatters';
 import InternalFileToken from '../file-token-group/file-token';
 import InternalFileTokenGroup from '../file-token-group/internal';
 import { ConstraintText, FormFieldError, FormFieldWarning } from '../form-field/internal';
@@ -22,7 +23,6 @@ import { useMergeRefs } from '../internal/hooks/use-merge-refs';
 import { useUniqueId } from '../internal/hooks/use-unique-id';
 import { joinStrings } from '../internal/utils/strings';
 import InternalSpaceBetween from '../space-between/internal';
-import * as defaultFormatters from './default-formatters.js';
 import { Dropzone, useDropzoneVisible } from './dropzone';
 import { FileUploadProps } from './interfaces';
 

src/prompt-input/interfaces.ts

@@ -1,5 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
+import { FileUploadProps } from '../file-upload/interfaces';
 import { IconProps } from '../icon/interfaces';
 import {
   BaseChangeDetail,
@@ -103,6 +104,22 @@ export interface PromptInputProps
    * Determines whether the secondary content area of the input has padding. If true, removes the default padding from the secondary content area.
    */
   disableSecondaryContentPaddings?: boolean;
+
+  /**
+   * Called when the user selects new file(s), or removes a file.
+   * The event `detail` contains the current value of the component.
+   */
+  onFilesChange?: NonCancelableEventHandler<FileUploadProps.ChangeDetail>;
+
+  /**
+   * Files.
+   */
+  files?: File[];
+
+  /**
+   * Specifies the native file input `multiple` attribute to allow users entering more than one file.
+   */
+  multiple?: boolean;
 }
 
 export namespace PromptInputProps {