fix(MessageBar/FileDropZone): Allow specific file types in attachment upload (#564)

Also adjusted child component attach button. Menu implementation demo was left as-is since react-dropzone is fully user-configurable there.

Author: karthikjeeyar

packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotAttachment.tsx

@@ -218,7 +218,16 @@ export const BasicDemo: FunctionComponent = () => {
             </ChatbotHeaderOptionsDropdown>
           </ChatbotHeaderActions>
         </ChatbotHeader>
-        <FileDropZone onFileDrop={handleFileDrop} displayMode={displayMode}>
+        <FileDropZone
+          onFileDrop={handleFileDrop}
+          displayMode={displayMode}
+          infoText="Allowed file types are .json, .txt and .yaml and maximum file size is 25 MB."
+          allowedFileTypes={{
+            'text/plain': ['.txt'],
+            'application/json': ['.json'],
+            'application/yaml': ['.yaml', '.yml']
+          }}
+        >
           <ChatbotContent>
             <MessageBox>
               {showAlert && (

packages/module/src/FileDropZone/FileDropZone.test.tsx

@@ -1,6 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import FileDropZone from './FileDropZone';
+import userEvent from '@testing-library/user-event';
 
 describe('FileDropZone', () => {
   it('should render file drop zone', () => {
@@ -11,4 +12,32 @@ describe('FileDropZone', () => {
     render(<FileDropZone onFileDrop={jest.fn()}>Hi</FileDropZone>);
     expect(screen.getByText('Hi')).toBeTruthy();
   });
+
+  it('should call onFileDrop when file type is accepted', async () => {
+    const onFileDrop = jest.fn();
+    const { container } = render(
+      <FileDropZone data-testid="input" allowedFileTypes={{ 'text/plain': ['.txt'] }} onFileDrop={onFileDrop} />
+    );
+
+    const file = new File(['Test'], 'example.text', { type: 'text/plain' });
+    const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement;
+
+    await userEvent.upload(fileInput, file);
+
+    expect(onFileDrop).toHaveBeenCalled();
+  });
+
+  it('should not call onFileDrop when file type is not accepted', async () => {
+    const onFileDrop = jest.fn();
+    const { container } = render(
+      <FileDropZone data-testid="input" allowedFileTypes={{ 'text/plain': ['.txt'] }} onFileDrop={onFileDrop} />
+    );
+
+    const file = new File(['[]'], 'example.json', { type: 'application/json' });
+    const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement;
+
+    await userEvent.upload(fileInput, file);
+
+    expect(onFileDrop).not.toHaveBeenCalled();
+  });
 });

packages/module/src/FileDropZone/FileDropZone.tsx

@@ -3,6 +3,7 @@ import type { FunctionComponent } from 'react';
 import { useState } from 'react';
 import { ChatbotDisplayMode } from '../Chatbot';
 import { UploadIcon } from '@patternfly/react-icons';
+import { Accept } from 'react-dropzone/.';
 
 export interface FileDropZoneProps {
   /** Content displayed when the drop zone is not currently in use */
@@ -13,6 +14,12 @@ export interface FileDropZoneProps {
   infoText?: string;
   /** When files are dropped or uploaded this callback will be called with all accepted files */
   onFileDrop: (event: DropEvent, data: File[]) => void;
+  /** Specifies the file types accepted by the attachment upload component.
+   *  Files that don't match the accepted types will be disabled in the file picker.
+   *  For example,
+   *   allowedFileTypes: { 'application/json': ['.json'], 'text/plain': ['.txt'] }
+   **/
+  allowedFileTypes?: Accept;
   /** Display mode for the Chatbot parent; this influences the styles applied */
   displayMode?: ChatbotDisplayMode;
 }
@@ -22,6 +29,7 @@ const FileDropZone: FunctionComponent<FileDropZoneProps> = ({
   className,
   infoText = 'Maximum file size is 25 MB',
   onFileDrop,
+  allowedFileTypes,
   displayMode = ChatbotDisplayMode.default,
   ...props
 }: FileDropZoneProps) => {
@@ -41,6 +49,7 @@ const FileDropZone: FunctionComponent<FileDropZoneProps> = ({
   return (
     <MultipleFileUpload
       dropzoneProps={{
+        accept: allowedFileTypes,
         onDrop: () => setShowDropZone(false),
         ...props
       }}

packages/module/src/MessageBar/AttachButton.test.tsx

@@ -53,4 +53,49 @@ describe('Attach button', () => {
     render(<AttachButton isCompact data-testid="button" />);
     expect(screen.getByTestId('button')).toHaveClass('pf-m-compact');
   });
+
+  it('should set correct accept attribute on file input', async () => {
+    render(<AttachButton inputTestId="input" allowedFileTypes={{ 'text/plain': ['.txt'] }} />);
+    await userEvent.click(screen.getByRole('button', { name: 'Attach' }));
+    const input = screen.getByTestId('input') as HTMLInputElement;
+    expect(input).toHaveAttribute('accept', 'text/plain,.txt');
+  });
+
+  it('should call onAttachAccepted when file type is accepted', async () => {
+    const onAttachAccepted = jest.fn();
+    render(
+      <AttachButton
+        inputTestId="input"
+        allowedFileTypes={{ 'text/plain': ['.txt'] }}
+        onAttachAccepted={onAttachAccepted}
+      />
+    );
+
+    const file = new File(['hello'], 'example.txt', { type: 'text/plain' });
+    const input = screen.getByTestId('input');
+
+    await userEvent.upload(input, file);
+
+    expect(onAttachAccepted).toHaveBeenCalled();
+    const [attachedFile] = onAttachAccepted.mock.calls[0][0];
+    expect(attachedFile).toEqual(file);
+  });
+
+  it('should not call onAttachAccepted when file type is not accepted', async () => {
+    const onAttachAccepted = jest.fn();
+    render(
+      <AttachButton
+        inputTestId="input"
+        allowedFileTypes={{ 'text/plain': ['.txt'] }}
+        onAttachAccepted={onAttachAccepted}
+      />
+    );
+
+    const file = new File(['[]'], 'example.json', { type: 'application/json' });
+    const input = screen.getByTestId('input');
+
+    await userEvent.upload(input, file);
+
+    expect(onAttachAccepted).not.toHaveBeenCalled();
+  });
 });

packages/module/src/MessageBar/AttachButton.tsx

@@ -7,14 +7,20 @@ import { forwardRef } from 'react';
 
 // Import PatternFly components
 import { Button, ButtonProps, DropEvent, Icon, Tooltip, TooltipProps } from '@patternfly/react-core';
-import { useDropzone } from 'react-dropzone';
+import { Accept, useDropzone } from 'react-dropzone';
 import { PaperclipIcon } from '@patternfly/react-icons/dist/esm/icons/paperclip-icon';
 
 export interface AttachButtonProps extends ButtonProps {
   /** Callback for when button is clicked */
   onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
   /** Callback function for AttachButton when an attachment is made */
   onAttachAccepted?: (data: File[], event: DropEvent) => void;
+  /** Specifies the file types accepted by the attachment upload component.
+   *  Files that don't match the accepted types will be disabled in the file picker.
+   *  For example,
+   *  allowedFileTypes: { 'application/json': ['.json'], 'text/plain': ['.txt'] }
+   **/
+  allowedFileTypes?: Accept;
   /** Class name for AttachButton */
   className?: string;
   /** Props to control if the AttachButton should be disabled */
@@ -40,11 +46,13 @@ const AttachButtonBase: FunctionComponent<AttachButtonProps> = ({
   tooltipContent = 'Attach',
   inputTestId,
   isCompact,
+  allowedFileTypes,
   ...props
 }: AttachButtonProps) => {
   const { open, getInputProps } = useDropzone({
     multiple: true,
-    onDropAccepted: onAttachAccepted
+    onDropAccepted: onAttachAccepted,
+    accept: allowedFileTypes
   });
 
   return (

packages/module/src/MessageBar/MessageBar.tsx

@@ -1,5 +1,6 @@
 import type { ChangeEvent, FunctionComponent, KeyboardEvent as ReactKeyboardEvent } from 'react';
 import { useCallback, useEffect, useRef, useState } from 'react';
+import { Accept } from 'react-dropzone/.';
 import { ButtonProps, DropEvent, TextArea, TextAreaProps, TooltipProps } from '@patternfly/react-core';
 
 // Import Chatbot components
@@ -78,6 +79,12 @@ export interface MessageBarProps extends TextAreaProps {
   /** Display mode of chatbot, if you want to message bar to resize when the display mode changes */
   displayMode?: ChatbotDisplayMode;
   isCompact?: boolean;
+  /** Specifies the file types accepted by the attachment upload component.
+   *  Files that don't match the accepted types will be disabled in the file picker.
+   *  For example,
+   *   allowedFileTypes: { 'application/json': ['.json'], 'text/plain': ['.txt'] }
+   **/
+  allowedFileTypes?: Accept;
 }
 
 export const MessageBar: FunctionComponent<MessageBarProps> = ({
@@ -98,6 +105,7 @@ export const MessageBar: FunctionComponent<MessageBarProps> = ({
   displayMode,
   value,
   isCompact = false,
+  allowedFileTypes,
   ...props
 }: MessageBarProps) => {
   // Text Input
@@ -295,6 +303,7 @@ export const MessageBar: FunctionComponent<MessageBarProps> = ({
             tooltipContent={buttonProps?.attach?.tooltipContent}
             isCompact={isCompact}
             tooltipProps={buttonProps?.attach?.tooltipProps}
+            allowedFileTypes={allowedFileTypes}
             {...buttonProps?.attach?.props}
           />
         )}
@@ -306,6 +315,7 @@ export const MessageBar: FunctionComponent<MessageBarProps> = ({
             inputTestId={buttonProps?.attach?.inputTestId}
             isCompact={isCompact}
             tooltipProps={buttonProps?.attach?.tooltipProps}
+            allowedFileTypes={allowedFileTypes}
             {...buttonProps?.attach?.props}
           />
         )}