Fixes open-metadata#28736 Fixed context center uplod file test fix (open-metadata#28627)

* Fixed context center uplod file test fix

* minor fix

* added debugging lines to check the aut issue

* lint fix

* addressed PR comment

* trigger

* lint fix

Author: Rohit0301

openmetadata-ui-core-components/src/main/resources/ui/src/components/application/file-upload/file-upload.tsx

@@ -21,7 +21,6 @@ import { ProgressBar } from '@/components/base/progress-indicators/progress-indi
 import { FeaturedIcon } from '@/components/foundations/featured-icon/featured-icon';
 import { cx } from '@/utils/cx';
 import { FileIcon as FileIconBase } from '@untitledui/file-icons';
-import { MdFileIcon } from './icons';
 import {
   CheckCircle,
   Trash01,
@@ -35,6 +34,7 @@ import type {
   DragEvent,
 } from 'react';
 import { useId, useRef, useState } from 'react';
+import { MdFileIcon } from './icons';
 
 type FileIconProps = ComponentProps<typeof FileIconBase>;
 
@@ -78,6 +78,7 @@ export interface FileUploadDropZoneProps {
   clickToUploadLabel?: string;
   orDragAndDropLabel?: string;
   'data-testid'?: string;
+  'input-data-testid'?: string;
   onDropFiles?: (files: FileList) => void;
   onDropUnacceptedFiles?: (files: FileList) => void;
   onSizeLimitExceed?: (files: FileList) => void;
@@ -125,6 +126,7 @@ export const FileUploadDropZone = ({
   clickToUploadLabel = 'Click to upload',
   orDragAndDropLabel = 'or drag and drop',
   'data-testid': dataTestId,
+  'input-data-testid': inputDataTestId,
   onDropFiles,
   onDropUnacceptedFiles,
   onSizeLimitExceed,
@@ -241,6 +243,7 @@ export const FileUploadDropZone = ({
           <input
             accept={accept}
             className="tw:peer tw:sr-only"
+            data-testid={inputDataTestId}
             disabled={isDisabled}
             id={id}
             multiple={allowsMultiple}

openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/ContextCenter.spec.ts

@@ -12,6 +12,8 @@
  */
 
 import { expect, Page } from '@playwright/test';
+import * as fs from 'fs';
+import * as path from 'path';
 import { VIEW_ONLY_RULE } from '../../constant/permission';
 import { KnowledgeCenterClass } from '../../support/entity/KnowledgeCenterClass';
 import { ClassificationClass } from '../../support/tag/ClassificationClass';
@@ -841,6 +843,27 @@ test.describe('Context Center', () => {
   // ─── Documents Page ───────────────────────────────────────────────────────────
 
   test.describe('Documents Page', () => {
+    const uploadFilePath = path.join(
+      __dirname,
+      '..',
+      'output',
+      'context-center-upload.txt'
+    );
+
+    test.beforeAll(() => {
+      const dir = path.dirname(uploadFilePath);
+      if (!fs.existsSync(dir)) {
+        fs.mkdirSync(dir, { recursive: true });
+      }
+      fs.writeFileSync(uploadFilePath, 'context center upload test file');
+    });
+
+    test.afterAll(() => {
+      if (fs.existsSync(uploadFilePath)) {
+        fs.unlinkSync(uploadFilePath);
+      }
+    });
+
     test('shows header with Upload File button', async ({ page }) => {
       await navigateToDocuments(page);
 
@@ -894,15 +917,75 @@ test.describe('Context Center', () => {
       const modal = page.getByRole('dialog', { name: /upload documents/i });
       await expect(modal).toBeVisible();
 
-      // Set file directly on the hidden input
-      await modal.locator('input[type="file"]').setInputFiles({
-        name: 'test-upload.txt',
-        mimeType: 'text/plain',
-        buffer: Buffer.from('playwright test file content'),
-      });
+      // Set file on the input via testId; wait for attached (not visible)
+      const fileInput = page.getByTestId('file-upload-input');
+      console.log('[upload-test] resolved file path:', uploadFilePath);
+
+      await fileInput.waitFor({ state: 'attached' });
+      console.log('[upload-test] file input is attached to DOM');
+
+      // Snapshot the input's attributes before we touch it
+      const inputAttrs = await fileInput.evaluate((el: HTMLInputElement) => ({
+        accept: el.accept,
+        disabled: el.disabled,
+        isConnected: el.isConnected,
+        multiple: el.multiple,
+        parentTag: el.parentElement?.tagName,
+        type: el.type,
+      }));
+      console.log(
+        '[upload-test] input attrs before setInputFiles:',
+        JSON.stringify(inputAttrs)
+      );
+
+      // Bridge: browser calls this Node function synchronously from the change
+      // handler, so the log is guaranteed to arrive before setInputFiles resolves.
+      // exposeFunction throws if already registered (e.g. test retry), so we guard.
+      const bridgeFn = '__uploadTestChangeEvent';
+      if (!(page as unknown as Record<string, unknown>)[bridgeFn]) {
+        await page.exposeFunction(
+          bridgeFn,
+          (info: { filesLength: number; name: string; size: number }) => {
+            console.log(
+              '[upload-test][browser→node] change event fired —',
+              'files.length:',
+              info.filesLength,
+              '| name:',
+              info.name,
+              '| size:',
+              info.size
+            );
+          }
+        );
+      }
+
+      // Register the change listener *then* call setInputFiles in one evaluate
+      // so there is no round-trip gap between the two.
+      await fileInput.evaluate((el: HTMLInputElement, fn: string) => {
+        el.addEventListener(
+          'change',
+          (e) => {
+            const t = e.target as HTMLInputElement;
+            (window as unknown as Record<string, (arg: unknown) => void>)[fn]({
+              filesLength: t.files?.length ?? -1,
+              name: t.files?.[0]?.name ?? '(none)',
+              size: t.files?.[0]?.size ?? -1,
+            });
+          },
+          { once: true }
+        );
+      }, bridgeFn);
+
+      await fileInput.setInputFiles(uploadFilePath);
 
       // File appears in staged list
-      await expect(modal.getByText('test-upload.txt').first()).toBeVisible();
+      console.log(
+        '[upload-test] waiting for filename to appear in staged list'
+      );
+      await expect(
+        modal.getByText('context-center-upload.txt').first()
+      ).toBeVisible();
+      console.log('[upload-test] filename visible in staged list');
 
       // Attach the file
       const uploadResPromise = page.waitForResponse(
@@ -916,7 +999,7 @@ test.describe('Context Center', () => {
       await expect(modal).not.toBeVisible();
 
       // File appears in document list
-      const docRow = page.getByText('test-upload.txt');
+      const docRow = page.getByText('context-center-upload.txt');
       await expect(docRow.first()).toBeVisible();
     });
 
@@ -1018,7 +1101,9 @@ test.describe('Context Center', () => {
 
       // Create a >5 MB in-memory buffer
       const bigBuffer = Buffer.alloc(6 * 1024 * 1024, 'x');
-      await modal.locator('input[type="file"]').setInputFiles({
+      const oversizedInput = page.getByTestId('file-upload-input');
+      await oversizedInput.waitFor({ state: 'attached' });
+      await oversizedInput.setInputFiles({
         name: 'too-large.bin',
         mimeType: 'application/octet-stream',
         buffer: bigBuffer,

openmetadata-ui/src/main/resources/ui/src/components/ContextCenter/UploadDocumentModal/UploadDocumentModal.component.tsx

@@ -162,6 +162,7 @@ const UploadDocumentModal: FC<UploadDocumentModalProps> = ({
                 allowsMultiple
                 clickToUploadLabel={t('label.click-to-upload')}
                 hint={t('message.upload-document-hint')}
+                input-data-testid="file-upload-input"
                 maxSize={DOCUMENT_MAX_FILE_SIZE}
                 orDragAndDropLabel={t('label.or-drag-and-drop')}
                 onDropFiles={handleDropFiles}