FileUploader: validation should not consider accept option (T1287250)

Author: Zedwag

packages/devextreme/js/__internal/ui/html_editor/utils/m_image_uploader_helper.ts

@@ -594,7 +594,7 @@ export function getFileUploaderBaseOptions() {
   return {
     value: [],
     name: FILE_UPLOADER_NAME,
-    accept: 'image/*',
+    allowedFileExtensions: ['image/*'],
     uploadMode: 'useButtons',
   };
 }

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

@@ -489,25 +489,13 @@ class FileUploader extends Editor<FileUploaderProperties> {
   }
 
   _validateFileExtension(file) {
-    const allowedExtensions = this.option('allowedFileExtensions');
-    const accept = this.option('accept');
-    const allowedTypes = this._getAllowedFileTypes(accept);
-    const fileExtension = file.value.name.substring(file.value.name.lastIndexOf('.')).toLowerCase();
-    // @ts-expect-error
-    if (accept?.length !== 0 && !this._isFileTypeAllowed(file.value, allowedTypes)) {
-      return false;
-    }
-    // @ts-expect-error
-    if (allowedExtensions?.length === 0) {
+    const { allowedFileExtensions } = this.option();
+
+    if (!allowedFileExtensions?.length) {
       return true;
     }
-    // @ts-expect-error
-    for (let i = 0; i < allowedExtensions.length; i++) {
-      if (fileExtension === allowedExtensions[i].toLowerCase()) {
-        return true;
-      }
-    }
-    return false;
+
+    return this._isFileExtensionAllowed(file.value, allowedFileExtensions);
   }
 
   _validateMaxFileSize(file): boolean {
@@ -524,6 +512,27 @@ class FileUploader extends Editor<FileUploaderProperties> {
     return minFileSize > 0 ? fileSize >= minFileSize : true;
   }
 
+  _isFileExtensionAllowed(file, allowedExtensions) {
+    for (let i = 0, n = allowedExtensions.length; i < n; i += 1) {
+      let allowedExtension = allowedExtensions[i];
+
+      if (allowedExtension[0] === '.') {
+        allowedExtension = allowedExtension.replace('.', '\\.');
+
+        if (file.name.match(new RegExp(`${allowedExtension}$`, 'i'))) {
+          return true;
+        }
+      } else {
+        allowedExtension = allowedExtension.replace(new RegExp('\\*', 'g'), '');
+
+        if (file.type.match(new RegExp(allowedExtension, 'i'))) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+
   _createBeforeSendAction() {
     this._beforeSendAction = this._createActionByOption('onBeforeSend', { excludeValidators: ['readOnly'] });
   }
@@ -931,7 +940,6 @@ class FileUploader extends Editor<FileUploaderProperties> {
   }
 
   _isInteractionDisabled() {
-    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
     return this.option('readOnly') || this.option('disabled');
   }
 
@@ -1129,35 +1137,6 @@ class FileUploader extends Editor<FileUploaderProperties> {
     }
   }
 
-  _getAllowedFileTypes(acceptSting) {
-    if (!acceptSting.length) {
-      return [];
-    }
-
-    return acceptSting.split(',').map((item) => item.trim());
-  }
-
-  _isFileTypeAllowed(file, allowedTypes) {
-    for (let i = 0, n = allowedTypes.length; i < n; i++) {
-      let allowedType = allowedTypes[i];
-
-      if (allowedType[0] === '.') {
-        allowedType = allowedType.replace('.', '\\.');
-
-        if (file.name.match(new RegExp(`${allowedType}$`, 'i'))) {
-          return true;
-        }
-      } else {
-        allowedType = allowedType.replace(new RegExp('\\*', 'g'), '');
-
-        if (file.type.match(new RegExp(allowedType, 'i'))) {
-          return true;
-        }
-      }
-    }
-    return false;
-  }
-
   _renderWrapper() {
     const $wrapper = $('<div>')
       .addClass(FILEUPLOADER_WRAPPER_CLASS)
@@ -1233,7 +1212,7 @@ class FileUploader extends Editor<FileUploaderProperties> {
   }
 
   _updateProgressBar(file, loadedFileData) {
-    file.progressBar && file.progressBar.option({
+    file.progressBar?.option({
       value: loadedFileData.loaded,
       showStatus: true,
     });
@@ -1659,7 +1638,7 @@ class FileUploadStrategyBase {
     }
 
     file.isAborted = true;
-    file.request && file.request.abort();
+    file.request?.abort();
 
     if (this._isCustomCallback('abortUpload')) {
       const abortUpload = this.fileUploader.option('abortUpload');

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

@@ -212,18 +212,26 @@ QUnit.module('multiple option', () => {
 });
 
 QUnit.module('option accept', () => {
-    QUnit.test('field accept should be rendered correctly', function(assert) {
+    QUnit.test('accept attr should be added on input on init', function(assert) {
         const $fileUploader = $('#fileuploader').dxFileUploader({
             accept: 'image/*'
         });
-        const fileUploader = $fileUploader.dxFileUploader('instance');
 
         const $fileInput = $fileUploader.find('.' + FILEUPLOADER_INPUT_CLASS);
 
-        assert.equal($fileInput.prop('accept'), 'image/*', 'value was set to empty string');
+        assert.strictEqual($fileInput.prop('accept'), 'image/*', 'accept attr is added');
+    });
+
+    QUnit.test('accept attr should be updated on input at runtime', function(assert) {
+        const $fileUploader = $('#fileuploader').dxFileUploader({
+            accept: 'image/*'
+        });
+        const fileUploader = $fileUploader.dxFileUploader('instance');
+        const $fileInput = $fileUploader.find('.' + FILEUPLOADER_INPUT_CLASS);
 
         fileUploader.option('accept', 'video/*');
-        assert.equal($fileInput.prop('accept'), 'video/*', 'value was set to empty string');
+
+        assert.strictEqual($fileInput.prop('accept'), 'video/*', 'accept attr is updated');
     });
 });