Chat FU: attach files which fail validation should block send button

Author: Zedwag

packages/devextreme/js/__internal/ui/chat/message_box/chat_text_area.ts

@@ -20,7 +20,7 @@ import type { OptionChanged } from '@ts/core/widget/types';
 import type { SupportedKeys } from '@ts/core/widget/widget';
 import Widget from '@ts/core/widget/widget';
 import FileUploader from '@ts/ui/file_uploader/file_uploader';
-import type { CancelButtonClickEvent, Properties as FileUploaderProperties } from '@ts/ui/file_uploader/file_uploader.types';
+import type { CancelButtonClickEvent, FileValidationErrorEvent, Properties as FileUploaderProperties } from '@ts/ui/file_uploader/file_uploader.types';
 import Informer from '@ts/ui/informer/informer';
 import type { TextAreaProperties } from '@ts/ui/m_text_area';
 import TextArea from '@ts/ui/m_text_area';
@@ -332,6 +332,7 @@ class ChatTextArea extends TextArea<Properties> {
       onUploaded: (e) => this._fileUploaderOnUploaded(e),
       onCancelButtonClick: (e) => this._fileUploaderOnCancelButtonClick(e),
       onFileLimitReached: () => this._fileUploaderFileLimitReached(),
+      onFileValidationError: (e) => this._fileUploaderFileValidationError(e),
     };
   }
 
@@ -344,17 +345,21 @@ class ChatTextArea extends TextArea<Properties> {
     fileUploaderOptions.onValueChanged?.(e);
   }
 
-  _fileUploaderOnUploadStarted(e: UploadStartedEvent): void {
-    const { file } = e;
-    const { fileUploaderOptions = {} } = this.option();
-
+  _addFileToMap(file: File): void {
     this._filesToSend?.set(file, {
       readyToSend: false,
       name: file.name,
       size: file.size,
     });
     this._toggleButtonDisableState();
+  }
+
+  _fileUploaderOnUploadStarted(e: UploadStartedEvent): void {
+    const { file } = e;
+
+    this._addFileToMap(file);
 
+    const { fileUploaderOptions = {} } = this.option();
     fileUploaderOptions.onUploadStarted?.(e);
   }
 
@@ -390,6 +395,12 @@ class ChatTextArea extends TextArea<Properties> {
     this._updateInputHeight();
   }
 
+  _fileUploaderFileValidationError(e: FileValidationErrorEvent): void {
+    const { file } = e;
+
+    this._addFileToMap(file);
+  }
+
   _toggleButtonDisableState(state?: boolean): void {
     const shouldDisable = state ?? !this._isMessageCanBeSent();
     this._sendButton?.option('disabled', shouldDisable);

packages/devextreme/js/__internal/ui/file_uploader/file_uploader.ts

@@ -138,6 +138,8 @@ class FileUploader extends Editor<FileUploaderProperties> {
 
   _filesUploadedAction?: (event?: Record<string, unknown>) => void;
 
+  _fileValidationErrorAction?: (event?: Record<string, unknown>) => void;
+
   _uploadedAction?: (event?: Record<string, unknown>) => void;
 
   _beforeSendAction?: (event?: Record<string, unknown>) => void;
@@ -207,6 +209,7 @@ class FileUploader extends Editor<FileUploaderProperties> {
         onUploadStarted: null,
         onUploaded: null,
         onFilesUploaded: null,
+        onFileValidationError: null,
         onProgress: null,
         onUploadError: null,
         onUploadAborted: null,
@@ -312,6 +315,7 @@ class FileUploader extends Editor<FileUploaderProperties> {
     this._createUploadStartedAction();
     this._createUploadedAction();
     this._createFilesUploadedAction();
+    this._createFileValidationErrorAction();
     this._createProgressAction();
     this._createUploadErrorAction();
     this._createUploadAbortedAction();
@@ -617,6 +621,10 @@ class FileUploader extends Editor<FileUploaderProperties> {
     this._filesUploadedAction = this._createActionByOption('onFilesUploaded', { excludeValidators: ['readOnly'] });
   }
 
+  _createFileValidationErrorAction(): void {
+    this._fileValidationErrorAction = this._createActionByOption('onFileValidationError', { excludeValidators: ['readOnly'] });
+  }
+
   _createProgressAction(): void {
     this._progressAction = this._createActionByOption('onProgress', { excludeValidators: ['readOnly'] });
   }
@@ -767,6 +775,8 @@ class FileUploader extends Editor<FileUploaderProperties> {
       if (!file.isValidMinSize) {
         file.$statusMessage.append(this._createValidationElement('invalidMinFileSizeMessage'));
       }
+
+      this._fileValidationErrorAction?.({ file: file.value });
       $fileContainer.addClass(FILEUPLOADER_INVALID_CLASS);
     }
   }

packages/devextreme/js/__internal/ui/file_uploader/file_uploader.types.ts

@@ -114,6 +114,10 @@ export interface FileUploaderChunkUploadResponse {
   error?: string;
 }
 
+export type FileValidationErrorEvent = NativeEventInfo<FileUploader> & {
+  readonly file: File;
+};
+
 export type CancelButtonClickEvent = NativeEventInfo<InteractionEvent> & {
   readonly file?: File;
 };
@@ -146,6 +150,8 @@ export interface Properties extends PublicProperties {
   onCancelButtonClick?: (e: CancelButtonClickEvent) => void;
 
   onFileLimitReached?: (e: FileLimitReachedEvent) => void;
+
+  onFileValidationError?: (e: FileValidationErrorEvent) => void;
 }
 
 export interface FileUploaderProperties extends Properties,

packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/fileUploader.tests.js

@@ -3670,6 +3670,51 @@ QUnit.module('uploading events', moduleConfig, () => {
 
         $cancelButton.trigger('dxclick');
     });
+
+    QUnit.test('onFileValidationError event should rise if file has not allowed extension', function(assert) {
+        assert.expect(2);
+
+        const $element = $('#fileuploader').dxFileUploader({
+            uploadMode: 'instantly',
+            allowedFileExtensions: ['.pdf'],
+            onFileValidationError: ({ file }) => {
+                assert.ok(true, 'onFileValidationError is called');
+                assert.strictEqual(file, fakeFile, 'file is passed');
+            },
+        });
+
+        simulateFileChoose($element, fakeFile);
+    });
+
+    QUnit.test('onFileValidationError event should rise if file has size bigger than maxFileSize', function(assert) {
+        assert.expect(2);
+
+        const $element = $('#fileuploader').dxFileUploader({
+            uploadMode: 'instantly',
+            maxFileSize: 1000,
+            onFileValidationError: ({ file }) => {
+                assert.ok(true, 'onFileValidationError is called');
+                assert.strictEqual(file, fakeFile2, 'file is passed');
+            },
+        });
+
+        simulateFileChoose($element, fakeFile2);
+    });
+
+    QUnit.test('onFileValidationError event should rise if file has size less than minFileSize', function(assert) {
+        assert.expect(2);
+
+        const $element = $('#fileuploader').dxFileUploader({
+            uploadMode: 'instantly',
+            minFileSize: 5000,
+            onFileValidationError: ({ file }) => {
+                assert.ok(true, 'onFileValidationError is called');
+                assert.strictEqual(file, fakeFile2, 'file is passed');
+            },
+        });
+
+        simulateFileChoose($element, fakeFile2);
+    });
 });
 
 QUnit.module('keyboard navigation', moduleConfig, () => {

packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/chatTextArea.tests.js

@@ -526,6 +526,22 @@ QUnit.module('ChatTextArea', moduleConfig, () => {
 
             assert.strictEqual(this.sendButton.option('disabled'), true);
         });
+
+        QUnit.test('send button should be disabled after adding files and some of them fail validation', function(assert) {
+            this.reinit({
+                fileUploaderOptions: {
+                    uploadFile: () => {},
+                    allowedFileExtensions: ['.png'],
+                },
+            });
+            const fileUploader = this.getFileUploader();
+            fileUploader.option('value', [fakeFile, { name: 'img.jpg', size: 1 }]);
+            fileUploader.upload();
+
+            this.clock.tick();
+
+            assert.strictEqual(this.sendButton.option('disabled'), true, 'send button is disabled after adding file that fail validation');
+        });
     });
 
     QUnit.module('Informer integration', {