diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 2943dd83a..852204b25 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -2,7 +2,6 @@ import React from 'react';
import { RainbowThemeProvider } from './components/shared/RainbowThemeProvider';
import { FileContextProvider } from './contexts/FileContext';
import { FilesModalProvider } from './contexts/FilesModalContext';
-import FileUploadModal from './components/shared/FileUploadModal';
import HomePage from './pages/HomePage';
// Import global styles
@@ -15,7 +14,6 @@ export default function App() {
-
diff --git a/frontend/src/components/shared/FileUploadModal.tsx b/frontend/src/components/shared/FileUploadModal.tsx
index 7d94a18c8..a83e96e62 100644
--- a/frontend/src/components/shared/FileUploadModal.tsx
+++ b/frontend/src/components/shared/FileUploadModal.tsx
@@ -2,10 +2,16 @@ import React from 'react';
import { Modal } from '@mantine/core';
import FileUploadSelector from './FileUploadSelector';
import { useFilesModalContext } from '../../contexts/FilesModalContext';
+import { Tool } from '../../types/tool';
-const FileUploadModal: React.FC = () => {
+interface FileUploadModalProps {
+ selectedTool?: Tool | null;
+}
+
+const FileUploadModal: React.FC = ({ selectedTool }) => {
const { isFilesModalOpen, closeFilesModal, onFileSelect, onFilesSelect } = useFilesModalContext();
+
return (
{
title="Upload Files"
subtitle="Choose files from storage or upload new files"
onFileSelect={onFileSelect}
- onFilesSelect={onFilesSelect}
- accept={["application/pdf"]}
- supportedExtensions={["pdf"]}
+ onFilesSelect={onFilesSelect}
+ accept={["*/*"]}
+ supportedExtensions={selectedTool?.supportedFormats || ["pdf"]}
+ data-testid="file-upload-modal"
/>
);
diff --git a/frontend/src/components/shared/QuickAccessBar.tsx b/frontend/src/components/shared/QuickAccessBar.tsx
index 3d861db90..2f78a0a9f 100644
--- a/frontend/src/components/shared/QuickAccessBar.tsx
+++ b/frontend/src/components/shared/QuickAccessBar.tsx
@@ -276,6 +276,7 @@ const QuickAccessBar = ({
onClick={config.onClick}
style={getButtonStyle(config)}
className={isButtonActive(config) ? 'activeIconScale' : ''}
+ data-testid={`${config.id}-button`}
>
{config.icon}
@@ -313,6 +314,7 @@ const QuickAccessBar = ({
onClick={config.onClick}
style={getButtonStyle(config)}
className={isButtonActive(config) ? 'activeIconScale' : ''}
+ data-testid={`${config.id}-button`}
>
{config.icon}
diff --git a/frontend/src/components/tools/convert/ConvertSettings.tsx b/frontend/src/components/tools/convert/ConvertSettings.tsx
index fa6134f54..a3051c88f 100644
--- a/frontend/src/components/tools/convert/ConvertSettings.tsx
+++ b/frontend/src/components/tools/convert/ConvertSettings.tsx
@@ -198,7 +198,7 @@ const ConvertSettings = ({
('toolPicker');
const [readerMode, setReaderMode] = useState(false);
@@ -266,6 +268,9 @@ function HomePageContent() {
)}
+
+ {/* Global Modals */}
+
);
}
diff --git a/frontend/src/tests/convert/ConvertE2E.spec.ts b/frontend/src/tests/convert/ConvertE2E.spec.ts
index e60f7826c..90d203b55 100644
--- a/frontend/src/tests/convert/ConvertE2E.spec.ts
+++ b/frontend/src/tests/convert/ConvertE2E.spec.ts
@@ -127,6 +127,27 @@ const getExpectedExtension = (toFormat: string): string => {
return extensionMap[toFormat] || '.pdf';
};
+/**
+ * Helper function to upload files through the modal system
+ */
+async function uploadFileViaModal(page: Page, filePath: string) {
+ // Click the Files button in the QuickAccessBar to open the modal
+ await page.click('[data-testid="files-button"]');
+
+ // Wait for the modal to open
+ await page.waitForSelector('.mantine-Modal-overlay', { state: 'visible' }, { timeout: 5000 });
+ //await page.waitForSelector('[data-testid="file-upload-modal"]', { timeout: 5000 });
+
+ // Upload the file through the modal's file input
+ await page.setInputFiles('input[type="file"]', filePath);
+
+ // Wait for the file to be processed and the modal to close
+ await page.waitForSelector('[data-testid="file-upload-modal"]', { state: 'hidden' });
+
+ // Wait for the file thumbnail to appear in the main interface
+ await page.waitForSelector('[data-testid="file-thumbnail"]', { timeout: 10000 });
+}
+
/**
* Generic test function for any conversion
*/
@@ -288,8 +309,8 @@ test.describe('Convert Tool E2E Tests', () => {
// Wait for the page to load
await page.waitForLoadState('networkidle');
- // Wait for the file upload area to appear (shown when no active files)
- await page.waitForSelector('[data-testid="file-dropzone"]', { timeout: 10000 });
+ // Wait for the QuickAccessBar to appear
+ await page.waitForSelector('[data-testid="files-button"]', { timeout: 10000 });
});
test.describe('Dynamic Conversion Tests', () => {
@@ -302,8 +323,7 @@ test.describe('Convert Tool E2E Tests', () => {
test.skip(!isAvailable, `Endpoint ${conversion.endpoint} is not available`);
const testFile = getTestFileForFormat(conversion.fromFormat);
- await page.setInputFiles('input[type="file"]', testFile);
- await page.waitForSelector('[data-testid="file-thumbnail"]', { timeout: 10000 });
+ await uploadFileViaModal(page, testFile);
await testConversion(page, conversion);
});
@@ -314,8 +334,7 @@ test.describe('Convert Tool E2E Tests', () => {
test.skip(!isAvailable, `Endpoint ${conversion.endpoint} is not available`);
const testFile = getTestFileForFormat(conversion.fromFormat);
- await page.setInputFiles('input[type="file"]', testFile);
- await page.waitForSelector('[data-testid="file-thumbnail"]', { timeout: 10000 });
+ await uploadFileViaModal(page, testFile);
await testConversion(page, conversion);
});
@@ -326,8 +345,7 @@ test.describe('Convert Tool E2E Tests', () => {
test.skip(!isAvailable, `Endpoint ${conversion.endpoint} is not available`);
const testFile = getTestFileForFormat(conversion.fromFormat);
- await page.setInputFiles('input[type="file"]', testFile);
- await page.waitForSelector('[data-testid="file-thumbnail"]', { timeout: 10000 });
+ await uploadFileViaModal(page, testFile);
await testConversion(page, conversion);
});
@@ -338,8 +356,7 @@ test.describe('Convert Tool E2E Tests', () => {
test.skip(!isAvailable, `Endpoint ${conversion.endpoint} is not available`);
const testFile = getTestFileForFormat(conversion.fromFormat);
- await page.setInputFiles('input[type="file"]', testFile);
- await page.waitForSelector('[data-testid="file-thumbnail"]', { timeout: 10000 });
+ await uploadFileViaModal(page, testFile);
await testConversion(page, conversion);
});
@@ -350,8 +367,7 @@ test.describe('Convert Tool E2E Tests', () => {
test.skip(!isAvailable, `Endpoint ${conversion.endpoint} is not available`);
const testFile = getTestFileForFormat(conversion.fromFormat);
- await page.setInputFiles('input[type="file"]', testFile);
- await page.waitForSelector('[data-testid="file-thumbnail"]', { timeout: 10000 });
+ await uploadFileViaModal(page, testFile);
await testConversion(page, conversion);
});
@@ -362,8 +378,7 @@ test.describe('Convert Tool E2E Tests', () => {
test.skip(!isAvailable, `Endpoint ${conversion.endpoint} is not available`);
const testFile = getTestFileForFormat(conversion.fromFormat);
- await page.setInputFiles('input[type="file"]', testFile);
- await page.waitForSelector('[data-testid="file-thumbnail"]', { timeout: 10000 });
+ await uploadFileViaModal(page, testFile);
await testConversion(page, conversion);
});
@@ -374,8 +389,7 @@ test.describe('Convert Tool E2E Tests', () => {
test.skip(!isAvailable, `Endpoint ${conversion.endpoint} is not available`);
const testFile = getTestFileForFormat(conversion.fromFormat);
- await page.setInputFiles('input[type="file"]', testFile);
- await page.waitForSelector('[data-testid="file-thumbnail"]', { timeout: 10000 });
+ await uploadFileViaModal(page, testFile);
await testConversion(page, conversion);
});
@@ -386,8 +400,7 @@ test.describe('Convert Tool E2E Tests', () => {
test.skip(!isAvailable, `Endpoint ${conversion.endpoint} is not available`);
const testFile = getTestFileForFormat(conversion.fromFormat);
- await page.setInputFiles('input[type="file"]', testFile);
- await page.waitForSelector('[data-testid="file-thumbnail"]', { timeout: 10000 });
+ await uploadFileViaModal(page, testFile);
await testConversion(page, conversion);
});
@@ -398,8 +411,7 @@ test.describe('Convert Tool E2E Tests', () => {
test.skip(!isAvailable, `Endpoint ${conversion.endpoint} is not available`);
const testFile = getTestFileForFormat(conversion.fromFormat);
- await page.setInputFiles('input[type="file"]', testFile);
- await page.waitForSelector('[data-testid="file-thumbnail"]', { timeout: 10000 });
+ await uploadFileViaModal(page, testFile);
await testConversion(page, conversion);
});
@@ -410,8 +422,7 @@ test.describe('Convert Tool E2E Tests', () => {
// Test that disabled conversions don't appear in dropdowns when they shouldn't
test('should not show conversion button when no valid conversions available', async ({ page }) => {
// This test ensures the convert button is disabled when no valid conversion is possible
- await page.setInputFiles('input[type="file"]', TEST_FILES.pdf);
- await page.waitForSelector('[data-testid="file-thumbnail"]', { timeout: 10000 });
+ await uploadFileViaModal(page, TEST_FILES.pdf);
// Click the Convert tool button
await page.click('[data-testid="tool-convert"]');