microsoft · OEvgeny · Aug 1, 2025 · Jul 2, 2025 · Jul 2, 2025 · Jul 2, 2025
@@ -102,6 +102,11 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
    - Attaching files will no longer remove previously attached files
    - Updated Fluent theme to use the new attachment preview feature
 - Added collapsible activity and activity with abstract handling, in PR [#5506](https://github.com/microsoft/BotFramework-WebChat/pull/5506), in PR [#5513](https://github.com/microsoft/BotFramework-WebChat/pull/5513), by [@OEvgeny](https://github.com/OEvgeny)
+- Added `disableFileUpload` flag to completelly disable file upload feature,
+- Deprecated `hideUploadButton` in favor of `disableFileUpload`. Added rectification logic in `patchStyleOptionsFromDeprecatedProps.js`.
+- Updated `BasicSendBoxToolbar` to rely solely on `disableFileUpload`.
+- Improved test to simulate keyboard and mouse behavior instead of DOM-only checks.
+  in PR [#5508](https://github.com/microsoft/BotFramework-WebChat/pull/5508), by [@JamesNewbyAtMicrosoft](https://github.com/JamesNewbyAtMicrosoft)
 
 ### Changed
 

@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Disable file upload (copilot)</title>
+    <script>
+      location = './disableFileUpload?theme=fluent&variant=copilot';
+    </script>
+  </head>
+  <body></body>
+</html>
@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Disable file upload (fluent)</title>
+    <script>
+      location = './disableFileUpload?theme=fluent';
+    </script>
+  </head>
+  <body></body>
+</html>
@@ -0,0 +1,89 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <title>Disable file upload</title>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7.8.7/babel.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/react@16.8.6/umd/react.production.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.production.min.js"></script>
+    <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>
+    <script crossorigin="anonymous" src="/__dist__/botframework-webchat-fluent-theme.production.min.js"></script>
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script>
+      run(async function () {
+        const { directLine, store } = testHelpers.createDirectLineEmulator();
+
+        WebChat.renderWebChat(
+          {
+            directLine,
+            store,
+            styleOptions: { disableFileUpload: true }
+          },
+          document.getElementById('webchat')
+        );
+
+        await pageConditions.uiConnected();
+
+        // DOM-based checks
+        expect(pageElements.byTestId(WebChat.testIds.sendBoxUploadButton)).toBeFalsy();
+        expect(pageElements.byTestId(WebChat.testIds.sendBoxDropZone)).toBeFalsy();
+
+        // Keyboard interaction: try to tab to the upload button
+        await pageObjects.focusSendBoxTextBox();
+        await host.sendTab();
+        console.log('document.activeElement', document.activeElement);
+
+        expect(document.activeElement).not.toBe(pageElements.byTestId(WebChat.testIds.sendBoxUploadButton));
+
+        // Simulate drag-and-drop using dispatchEvent
+        const sendBox = document.querySelector('[role="form"]');
+        if (sendBox) {
+          const dataTransfer = new DataTransfer();
+          const file = new File(['dummy content'], 'test.txt', { type: 'text/plain' });
+          dataTransfer.items.add(file);
+
+          const dragEnterEvent = new DragEvent('dragenter', {
+            bubbles: true,
+            cancelable: true,
+            dataTransfer
+          });
+
+          const dragOverEvent = new DragEvent('dragover', {
+            bubbles: true,
+            cancelable: true,
+            dataTransfer
+          });
+
+          const dropEvent = new DragEvent('drop', {
+            bubbles: true,
+            cancelable: true,
+            dataTransfer
+          });
+
+          sendBox.dispatchEvent(dragEnterEvent);
+          sendBox.dispatchEvent(dragOverEvent);
+          sendBox.dispatchEvent(dropEvent);
+
+          // Drop zone should still not appear
+          expect(pageElements.byTestId(WebChat.testIds.sendBoxDropZone)).toBeFalsy();
+
+          // Attachment bar item should not appear
+          expect(pageElements.byTestId(WebChat.testIds.sendBoxAttachmentBarItem)).toBeFalsy();
+
+          await host.snapshot('drag-and-drop-disabled');
+        }
+
+        // Hover interaction: hover over the send box area
+        await host.hover(document.querySelector('[role="form"]'));
+        await host.snapshot('hover-over-sendbox-toolbar');
+
+        // Final visual confirmation
+        await host.snapshot('local');
+      });
+    </script>
+  </body>
+</html>
@@ -297,6 +297,14 @@ type StyleOptions = {
    */
 
   hideSendBox?: boolean;
+
+  /**
+   * Indicates if the upload file button should be hidden.
+   *
+   * @default false
+   *
+   * @deprecated deprecated since 4.18.0: obsolated by {@linkcode disableFileUpload}. This option will be removed on or after 2027-07-14.
+   */
   hideUploadButton?: boolean;
 
   /**
@@ -976,6 +984,15 @@ type StyleOptions = {
    * @default 3
    */
   sendBoxAttachmentBarMaxThumbnail?: number;
+
+  /**
+   * Indicates if file upload should be disabled.
+   *
+   * @default false
+   *
+   * New in 4.19.0.
+   */
+  disableFileUpload?: boolean;
 };
 
 // StrictStyleOptions is only used internally in Web Chat and for simplifying our code:

@@ -98,14 +98,15 @@ const DEFAULT_OPTIONS: Required<StyleOptions> = {
   autoScrollSnapOnPageOffset: 0, // TODO: Rename from "autoScrollSnapOnPageoffset".
 
   // Send box
+  disableFileUpload: false,
   hideSendBox: false,
-  hideUploadButton: false,
   hideTelephoneKeypadButton: true,
+  hideUploadButton: false,
   microphoneButtonColorOnDictate: '#F33',
+  sendAttachmentOn: 'send',
   sendBoxBackground: 'White',
   uploadAccept: undefined,
   uploadMultiple: true,
-  sendAttachmentOn: 'send',
 
   // Send box buttons
   sendBoxButtonColor: undefined,

@@ -10,5 +10,12 @@ export default function patchStyleOptionsFromDeprecatedProps(styleOptions) {
     styleOptions = updateIn(styleOptions, ['slowConnectionAfter'], () => 0);
   }
 
+  // Rectify deprecated "hideUploadButton" into "disableFileUpload"
+  if ('hideUploadButton' in styleOptions && !('disableFileUpload' in styleOptions)) {
+    console.warn('Web Chat: "hideUploadButton" is deprecated. Please use "disableFileUpload" instead.');
+
+    styleOptions = updateIn(styleOptions, ['disableFileUpload'], () => !!styleOptions.hideUploadButton);
+  }
+
   return styleOptions;
 }
@@ -5,10 +5,12 @@ import UploadButton from './UploadButton';
 
 const { useStyleOptions } = hooks;
 
+// NOTE: "hideUploadButton" is deprecated. Use "disableFileUpload" instead.
+//       Rectification logic is handled in patchStyleOptionsFromDeprecatedProps.js
 function BasicSendBoxToolbar({ className }: SendBoxToolbarMiddlewareProps) {
-  const [{ hideUploadButton }] = useStyleOptions();
+  const [{ disableFileUpload }] = useStyleOptions();
 
-  return !hideUploadButton && <UploadButton className={className} />;
+  return !disableFileUpload && <UploadButton className={className} />;
 }
 
 export default memo(BasicSendBoxToolbar);
diff --git a/packages/component/src/SendBoxToolbar/UploadButton.tsx b/packages/component/src/SendBoxToolbar/UploadButton.tsx
@@ -13,6 +13,7 @@ import useMakeThumbnail from '../hooks/useMakeThumbnail';
 import useStyleSet from '../hooks/useStyleSet';
 import useSubmit from '../providers/internal/SendBox/useSubmit';
 import AttachmentIcon from './Assets/AttachmentIcon';
+import testIds from '../testIds';
 
 const { useSendBoxAttachments, useLocalizer, useStyleOptions, useUIState } = hooks;
 
@@ -120,7 +121,13 @@ function UploadButton(props: UploadButtonProps) {
         tabIndex={-1}
         type="file"
       />
-      <IconButton alt={uploadFileString} aria-label={uploadFileString} disabled={disabled} onClick={handleClick}>
+      <IconButton
+        alt={uploadFileString}
+        aria-label={uploadFileString}
+        data-testid={testIds.basicSendBoxUploadButton}
+        disabled={disabled}
+        onClick={handleClick}
+      >
         <AttachmentIcon checked={!!sendBoxAttachments.length} />
       </IconButton>
     </div>

@@ -49,6 +49,7 @@ export default function createSendBoxStyle({
         flexDirection: 'column',
         // eslint-disable-next-line no-magic-numbers
         gap: `${paddingRegular / 2}px`,
+        gridArea: 'text-box',
         // eslint-disable-next-line no-magic-numbers
         paddingBottom: `${paddingRegular / 2}px`,
         // eslint-disable-next-line no-magic-numbers
@@ -60,6 +61,14 @@ export default function createSendBoxStyle({
       '& .webchat__send-box__attachment-bar': {
         padding: `${paddingRegular}px`,
         paddingBlockEnd: `0px`
+      },
+
+      '& .webchat__upload-button': {
+        gridArea: 'upload-button'
+      },
+
+      '& .webchat__send-button': {
+        gridArea: 'send-button'
       }
     }
   } satisfies StyleSet;

diff --git a/packages/component/src/testIds.ts b/packages/component/src/testIds.ts
@@ -1,4 +1,5 @@
 const testIds = {
+  basicSendBoxUploadButton: 'basic send box toolbar upload button',
   codeBlockCopyButton: 'code block copy button',
   copyButton: 'copy button',
   feedbackButton: 'feedback button',

@@ -48,7 +48,7 @@ type Props = Readonly<{
 }>;
 
 function SendBox(props: Props) {
-  const [{ hideTelephoneKeypadButton, hideUploadButton, maxMessageLength }] = useStyleOptions();
+  const [{ disableFileUpload, hideTelephoneKeypadButton, maxMessageLength }] = useStyleOptions();
   const [attachments, setAttachments] = useSendBoxAttachments();
   const [globalMessage, setGlobalMessage] = useSendBoxValue();
   const [localMessage, setLocalMessage] = useState('');
@@ -238,7 +238,7 @@ function SendBox(props: Props) {
           )}
           <Toolbar>
             {!hideTelephoneKeypadButton && <TelephoneKeypadToolbarButton />}
-            {!hideUploadButton && <AddAttachmentButton onFilesAdded={handleAddFiles} />}
+            {!disableFileUpload && <AddAttachmentButton onFilesAdded={handleAddFiles} />}
             <ToolbarSeparator />
             <ToolbarButton
               aria-label={localize('TEXT_INPUT_SEND_BUTTON_ALT')}
@@ -250,7 +250,7 @@ function SendBox(props: Props) {
             </ToolbarButton>
           </Toolbar>
         </div>
-        <DropZone onFilesAdded={handleAddFiles} />
+        {!disableFileUpload && <DropZone onFilesAdded={handleAddFiles} />}
         <ErrorMessage error={errorMessage} id={errorMessageId} />
       </div>
     </form>

@@ -1,21 +1,21 @@
 # Sample - Disable the Upload Button
 
--  Prevent users from sending attachments to the bot by disabling the upload button.
+- Prevent users from sending attachments to the bot by disabling the upload button.
 
 # Test out the hosted sample
 
--  [Try out MockBot](https://microsoft.github.io/BotFramework-WebChat/02.branding-styling-and-customization/f.hide-upload-button)
+- [Try out MockBot](https://microsoft.github.io/BotFramework-WebChat/02.branding-styling-and-customization/f.hide-upload-button)
 
 # How to run
 
--  Fork this repository
--  Navigate to `/Your-Local-WebChat/samples/02.branding-styling-and-customization/f.hide-upload-button` in command line
--  Run `npx serve`
--  Browse to [http://localhost:5000/](http://localhost:5000/)
+- Fork this repository
+- Navigate to `/Your-Local-WebChat/samples/02.branding-styling-and-customization/f.hide-upload-button` in command line
+- Run `npx serve`
+- Browse to [http://localhost:5000/](http://localhost:5000/)
 
 # Things to try out
 
--  Note that there is no upload button in the Send Box
+- Note that there is no upload button in the Send Box
 
 # Code
 
@@ -31,7 +31,7 @@ By modifying the `styleOptions` object passed into the renderer, we can disable
   window.WebChat.renderWebChat({
     directLine: window.WebChat.createDirectLine({ token }),
 +   styleOptions: {
-+     hideUploadButton: true
++     disableFileUpload: true
 +   }
   }, document.getElementById('webchat'));
 ```
@@ -75,7 +75,7 @@ Here is the finished `index.html`:
           {
             directLine: window.WebChat.createDirectLine({ token }),
             styleOptions: {
-              hideUploadButton: true
+              disableFileUpload: true
             }
           },
           document.getElementById('webchat')
@@ -91,7 +91,7 @@ Here is the finished `index.html`:
 
 # Further reading
 
--  [Branding styling bot](https://microsoft.github.io/BotFramework-WebChat/02.branding-styling-and-customization/a.branding-web-chat) | [(Branding styling source code)](https://github.com/microsoft/BotFramework-WebChat/tree/main/samples/02.branding-styling-and-customization/a.branding-web-chat)
+- [Branding styling bot](https://microsoft.github.io/BotFramework-WebChat/02.branding-styling-and-customization/a.branding-web-chat) | [(Branding styling source code)](https://github.com/microsoft/BotFramework-WebChat/tree/main/samples/02.branding-styling-and-customization/a.branding-web-chat)
 
 ## Full list of Web Chat hosted samples
 

@@ -43,7 +43,7 @@
           {
             directLine: window.WebChat.createDirectLine({ token }),
             styleOptions: {
-              hideUploadButton: true
+              disableFileUpload: true
             }
           },
           document.getElementById('webchat')