diff --git a/.vscode/launch.json b/.vscode/launch.json
index 064e105086..8a476bb025 100644
--- 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
index 537eeeabe8..e2910656b7 100644
--- 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
new file mode 100644
index 0000000000..42467e6582
--- /dev/null
+++ b/__tests__/html/attachment.allowedFileTypes.html
@@ -0,0 +1,38 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/__tests__/html/attachment.allowedFileTypes.js b/__tests__/html/attachment.allowedFileTypes.js
new file mode 100644
index 0000000000..a9987e7163
--- /dev/null
+++ 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
index e743bf2532..251432b47e 100644
--- 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
index d1543dc7b3..9b4ed3efda 100644
--- a/packages/api/src/defaultStyleOptions.ts
+++ b/packages/api/src/defaultStyleOptions.ts
@@ -95,6 +95,8 @@ const DEFAULT_OPTIONS: Required = {
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
index 87bc821362..cd14eba1d8 100644
--- 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 = ({ className }) => {
const [{ uploadButton: uploadButtonStyleSet }] = useStyleSet();
+ const [{ uploadAccept, uploadMultiple }] = useStyleOptions();
const [disabled] = useDisabled();
const inputRef = useRef();
const localize = useLocalizer();
@@ -122,10 +123,11 @@ const UploadButton: FC = ({ className }) => {
return (