Adding styleOptions to support file type restriction and single file upload (#5048)

ms-jb · web-flow · commit 1c16476035b7 · 2024-03-21T15:07:35.000-07:00
* Add style option to allow for file type narrowing

* Rename and add multi upload prop

* Fix launch config type

* Add e2e test to validate &lt;input&gt;

* Resolve comments

* Revert to true

* Resolve e2e test

* Added changelog entry
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -5,7 +5,7 @@
   "version": "0.2.0",
   "configurations": [
     {
-      "type": "edge",
+      "type": "msedge",
       "request": "launch",
       "name": "Launch Microsoft Edge",
       "url": "http://localhost:5000/samples/",
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -22,6 +22,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Added
+
+- Resolves [#5081](https://github.com/microsoft/BotFramework-WebChat/issues/5081). Added `uploadAccept` and `uploadMultiple` style options, by [@ms-jb](https://github.com/ms-jb)
+
 ### Changed
 
 -  Moved pull request validation pipeline to GitHub Actions, by [@compulim](https://github.com/compulim), in PR [#4976](https://github.com/microsoft/BotFramework-WebChat/pull/4976)
diff --git a/__tests__/html/attachment.allowedFileTypes.html b/__tests__/html/attachment.allowedFileTypes.html
@@ -0,0 +1,38 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script crossorigin="anonymous" src="/test-harness.js"></script>
+    <script crossorigin="anonymous" src="/test-page-object.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script>
+      run(async function () {
+        const directLine = WebChat.createDirectLine({ token: await testHelpers.token.fetchDirectLineToken() });
+        const store = testHelpers.createStore();
+
+        WebChat.renderWebChat(
+          {
+            directLine,
+            store: testHelpers.createStore(),
+            styleOptions: {
+              uploadAccept: 'image/*',
+              uploadMultiple: false
+            }
+          },
+          document.getElementById('webchat')
+        );
+
+        await pageConditions.uiConnected();
+        
+        // Validate the <input> element has the correct file types
+        const uploadButton = pageElements.uploadButton()
+        expect(uploadButton).toHaveProperty('accept', 'image/*');
+        expect(uploadButton).toHaveProperty('multiple', false);
+        
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html/attachment.allowedFileTypes.js b/__tests__/html/attachment.allowedFileTypes.js
@@ -0,0 +1,6 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('Attachment', () => {
+  test('with allowed file types', () =>
+    runHTML('attachment.allowedFileTypes.html'));
+});
diff --git a/packages/api/src/StyleOptions.ts b/packages/api/src/StyleOptions.ts
@@ -259,6 +259,18 @@ type StyleOptions = {
   microphoneButtonColorOnDictate?: string;
   sendBoxBackground?: string;
 
+  /**
+   * The comma-delimited file types that the upload button should accept.
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept
+   * @example 'image/*,.pdf'
+   */
+  uploadAccept?: string;
+  /**
+   * If true, the upload button will accept multiple files.
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#multiple
+   */
+  uploadMultiple?: boolean;
+
   /** Send box button: Icon color, defaults to subtle */
   sendBoxButtonColor?: string;
 
diff --git a/packages/api/src/defaultStyleOptions.ts b/packages/api/src/defaultStyleOptions.ts
@@ -95,6 +95,8 @@ const DEFAULT_OPTIONS: Required<StyleOptions> = {
   hideUploadButton: false,
   microphoneButtonColorOnDictate: '#F33',
   sendBoxBackground: 'White',
+  uploadAccept: undefined,
+  uploadMultiple: true,
 
   // Send box buttons
   sendBoxButtonColor: undefined,
diff --git a/packages/component/src/SendBox/UploadButton.tsx b/packages/component/src/SendBox/UploadButton.tsx
@@ -3,15 +3,15 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React, { FC, useCallback, useRef } from 'react';
 
-import AttachmentIcon from './Assets/AttachmentIcon';
-import connectToWebChat from '../connectToWebChat';
 import downscaleImageToDataURL from '../Utils/downscaleImageToDataURL/index';
-import IconButton from './IconButton';
+import connectToWebChat from '../connectToWebChat';
+import useStyleToEmotionObject from '../hooks/internal/useStyleToEmotionObject';
 import useSendFiles from '../hooks/useSendFiles';
 import useStyleSet from '../hooks/useStyleSet';
-import useStyleToEmotionObject from '../hooks/internal/useStyleToEmotionObject';
+import AttachmentIcon from './Assets/AttachmentIcon';
+import IconButton from './IconButton';
 
-const { useDisabled, useLocalizer } = hooks;
+const { useDisabled, useLocalizer, useStyleOptions } = hooks;
 
 const ROOT_STYLE = {
   '&.webchat__upload-button': {
@@ -95,6 +95,7 @@ type UploadButtonProps = {
 
 const UploadButton: FC<UploadButtonProps> = ({ className }) => {
   const [{ uploadButton: uploadButtonStyleSet }] = useStyleSet();
+  const [{ uploadAccept, uploadMultiple }] = useStyleOptions();
   const [disabled] = useDisabled();
   const inputRef = useRef<HTMLInputElement>();
   const localize = useLocalizer();
@@ -122,10 +123,11 @@ const UploadButton: FC<UploadButtonProps> = ({ className }) => {
   return (
     <div className={classNames(rootClassName, 'webchat__upload-button', uploadButtonStyleSet + '', className)}>
       <input
+        accept={uploadAccept}
         aria-disabled={disabled}
         aria-hidden="true"
         className="webchat__upload-button--file-input"
-        multiple={true}
+        multiple={uploadMultiple}
         onChange={disabled ? undefined : handleFileChange}
         onClick={disabled ? PREVENT_DEFAULT_HANDLER : undefined}
         readOnly={disabled}
diff --git a/packages/test/page-object/src/globals/pageElements/index.js b/packages/test/page-object/src/globals/pageElements/index.js
@@ -19,6 +19,7 @@ import transcript from './transcript';
 import transcriptLiveRegion from './transcriptLiveRegion';
 import transcriptScrollable from './transcriptScrollable';
 import transcriptTerminator from './transcriptTerminator';
+import uploadButton from './uploadButton';
 
 export {
   activeActivity,
@@ -41,5 +42,6 @@ export {
   transcript,
   transcriptLiveRegion,
   transcriptScrollable,
-  transcriptTerminator
+  transcriptTerminator,
+  uploadButton
 };

Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,7 @@`
`5`	`5`	`"version": "0.2.0",`
`6`	`6`	`"configurations": [`
`7`	`7`	`{`
`8`		`- "type": "edge",`
	`8`	`+ "type": "msedge",`
`9`	`9`	`"request": "launch",`
`10`	`10`	`"name": "Launch Microsoft Edge",`
`11`	`11`	`"url": "http://localhost:5000/samples/",`