microsoft · OEvgeny · Aug 1, 2025 · Jul 2, 2025 · Jul 2, 2025 · Jul 2, 2025
@@ -39,6 +39,7 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
    - `activityGroupingDecoratorMiddleware`, related to PR [#5504](https://github.com/microsoft/BotFramework-WebChat/pull/5504)
    - `sendBoxMiddleware`, related to PR [#5504](https://github.com/microsoft/BotFramework-WebChat/pull/5504)
    - `sendBoxToolbarMiddleware`, related to PR [#5504](https://github.com/microsoft/BotFramework-WebChat/pull/5504)
+- `styleOptions.hideUploadButton` is being deprecated in favor of `styleOptions.disableFileUpload`. The option will be removed on or after 2027-07-14
 
 ### Added
 
@@ -102,6 +103,9 @@ 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, in PR [#5508](https://github.com/microsoft/BotFramework-WebChat/pull/5508), by [@JamesNewbyAtMicrosoft](https://github.com/JamesNewbyAtMicrosoft)
+   - Deprecated `hideUploadButton` in favor of `disableFileUpload`.
+   - Updated `BasicSendBoxToolbar` to rely solely on `disableFileUpload`.
 
 ### Changed
 

@@ -20,6 +20,13 @@
           WebChat: { FluentThemeProvider, ReactWebChat }
         } = window; // Imports in UMD fashion.
 
+        const warnings = [];
+        const warn = console.warn.bind(console);
+        console.warn = (message) => {
+          warnings.push(message);
+          warn(message);
+        };
+
         const { directLine, store } = testHelpers.createDirectLineEmulator();
 
         const App = () => (
@@ -34,10 +41,15 @@
         );
 
         await pageConditions.uiConnected();
+
+        expect(warnings).toEqual([
+          'botframework-webchat: `styleOptions.hideUploadButton` is being deprecated in favor of `styleOptions.disableFileUpload`. The option will be removed on or after 2027-07-14.'
+        ]);
 
         // THEN: No attach button should be render.
         expect(pageElements.byTestId(WebChat.testIds.sendBoxUploadButton)).toBeFalsy();
         await host.snapshot();
+
       });
     </script>
   </body>

@@ -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 (false) (fluent)</title>
+    <script>
+      location = './disableFileUpload?disableFileUpload=false&theme=fluent';
+    </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,86 @@
+<!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();
+
+        const disableFileUpload = new URLSearchParams(location.search || '').get('disableFileUpload') !== 'false';
+        const { isFluentTheme } = renderWebChat(
+          {
+            directLine,
+            store,
+            styleOptions: { disableFileUpload }
+          },
+          document.getElementById('webchat')
+        );
+
+        await pageConditions.uiConnected();
+
+        // DOM-based checks
+        if (disableFileUpload) {
+          expect(pageElements.byTestId(WebChat.testIds.sendBoxUploadButton)).toBeFalsy();
+          expect(pageElements.byTestId(WebChat.testIds.sendBoxDropZone)).toBeFalsy();
+        } else {
+          expect(pageElements.byTestId(WebChat.testIds.sendBoxUploadButton)).toBeDefined();
+          expect(pageElements.byTestId(WebChat.testIds.sendBoxDropZone)).toBeDefined();
+        }
+
+        // Keyboard interaction: try to tab to the upload button
+        await pageObjects.focusSendBoxTextBox();
+        await host.sendTab();
+
+        if (disableFileUpload) {
+          expect(document.activeElement).not.toBe(pageElements.byTestId(WebChat.testIds.sendBoxUploadButton));
+        } else {
+          expect(document.activeElement).toBe(pageElements.byTestId(WebChat.testIds.sendBoxUploadButton));
+        }
+
+        if (isFluentTheme) {
+          // We cannot mimic drag-and-drop in WebDriver yet. So we are doing as good as we could.
+          const dataTransfer = new DataTransfer();
+
+          dataTransfer.items.add(new File([new ArrayBuffer(100)], 'simple.txt'));
+
+          const dragEnterDocumentEvent = new DragEvent('dragenter', {
+            bubbles: true,
+            cancelable: true,
+            dataTransfer
+          });
+
+          document.dispatchEvent(dragEnterDocumentEvent);
+
+          const dropEvent = new DragEvent('drop', {
+            bubbles: true,
+            cancelable: true,
+            dataTransfer
+          });
+
+          document.querySelector(`[data-testid="${WebChat.testIds['sendBoxDropZone']}"]`)?.dispatchEvent(dropEvent);
+
+          if (disableFileUpload) {
+            // Attachment bar item should not appear
+            expect(pageElements.byTestId(WebChat.testIds.sendBoxAttachmentBarItem)).toBeFalsy();
+          } else {
+            // Attachment bar item should appear
+            expect(pageElements.byTestId(WebChat.testIds.sendBoxAttachmentBarItem)).toBeDefined();
+          }
+        }
+
+        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:
@@ -985,7 +1002,12 @@ type StyleOptions = {
 type StrictStyleOptions = Required<
   Omit<
     StyleOptions,
-    'bubbleImageHeight' | 'bubbleMaxWidth' | 'bubbleMinWidth' | 'hideScrollToEndButton' | 'newMessagesButtonFontSize'
+    | 'bubbleImageHeight'
+    | 'bubbleMaxWidth'
+    | 'bubbleMinWidth'
+    | 'hideScrollToEndButton'
+    | 'hideUploadButton'
+    | 'newMessagesButtonFontSize'
   >
 > & {
   bubbleFromUserNubOffset: number;

@@ -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: undefined, // Deprecated as of 4.19.0.
   microphoneButtonColorOnDictate: '#F33',
+  sendAttachmentOn: 'send',
   sendBoxBackground: 'White',
   uploadAccept: undefined,
   uploadMultiple: true,
-  sendAttachmentOn: 'send',
 
   // Send box buttons
   sendBoxButtonColor: undefined,

@@ -10,5 +10,14 @@ export default function patchStyleOptionsFromDeprecatedProps(styleOptions) {
     styleOptions = updateIn(styleOptions, ['slowConnectionAfter'], () => 0);
   }
 
+  // Rectify deprecated "hideUploadButton" into "disableFileUpload"
+  if (styleOptions.hideUploadButton !== undefined) {
+    console.warn(
+      'botframework-webchat: `styleOptions.hideUploadButton` is being deprecated in favor of `styleOptions.disableFileUpload`. The option will be removed on or after 2027-07-14.'
+    );
+
+    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);
@@ -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;

@@ -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')