Fix/upload button visibility on failure

packages/upup/e2e/fixtures/baseTest.ts

@@ -0,0 +1,15 @@
+import { test as baseTest, expect } from '@playwright/test';
+import { UploaderPage } from '../pages/UploaderPage';
+
+type UpupPageObjects = {
+  uploaderPage: UploaderPage;
+};
+
+export const test = baseTest.extend<UpupPageObjects>({
+  uploaderPage: async ({ page }, use) => {
+    const uploaderPage = new UploaderPage(page);
+    await use(uploaderPage);
+  },
+});
+
+export { expect };

packages/upup/e2e/locators/UploaderLocators.ts

@@ -0,0 +1,12 @@
+export const UploaderLocators = {
+  fileInput: 'input[type="file"]',
+  myDeviceBtn: 'My Device',
+  addMoreBtn: 'Add More',
+  removeAllFilesBtn: 'Remove all files',
+  removeFileBtn: 'Remove file',
+  uploaderRegion: 'Add your documents here, you',
+
+  messages: {
+    dropInstructions: 'Add your documents here, you can upload up to 10 files max',
+  },
+} as const;

packages/upup/e2e/pages/UploaderPage.ts

@@ -0,0 +1,48 @@
+import { Locator, Page } from '@playwright/test';
+import { UploaderLocators as locators } from '../locators/UploaderLocators';
+
+export class UploaderPage {
+  readonly page: Page;
+  readonly fileInput: Locator;
+  readonly myDeviceBtn: Locator;
+  readonly addMoreBtn: Locator;
+  readonly removeAllFilesBtn: Locator;
+  readonly uploaderRegion: Locator;
+
+  constructor(page: Page) {
+    this.page = page;
+    this.fileInput = page.locator(locators.fileInput);
+    this.myDeviceBtn = page.getByRole('button', { name: locators.myDeviceBtn });
+    this.addMoreBtn = page.getByRole('button', { name: locators.addMoreBtn });
+    this.removeAllFilesBtn = page.getByRole('button', { name: locators.removeAllFilesBtn });
+    this.uploaderRegion = page.getByLabel(locators.uploaderRegion);
+  }
+
+  async goTo(): Promise<void> {
+    await this.page.goto(
+      'http://localhost:6007/iframe.html?id=upupuploader--uploader-with-button&viewMode=story'
+    );
+    await this.page.waitForLoadState('domcontentloaded');
+    await this.uploaderRegion.waitFor({ state: 'visible' });
+  }
+
+  async uploadFiles(files: string[]): Promise<void> {
+    await this.fileInput.setInputFiles(files);
+  }
+
+  async clickUpload(fileCount: number): Promise<void> {
+    const uploadBtn = this.page.getByRole('button', {
+      name: `Upload ${fileCount} file${fileCount > 1 ? 's' : ''}`,
+    });
+    await uploadBtn.click();
+  }
+
+  async addMoreFiles(files: string[]): Promise<void> {
+    await this.addMoreBtn.click();
+    await this.fileInput.setInputFiles(files);
+  }
+
+  async removeAllFiles(): Promise<void> {
+    await this.removeAllFilesBtn.click();
+  }
+}

packages/upup/e2e/specs/upload.spec.ts

@@ -0,0 +1,38 @@
+import { test, expect } from '../fixtures/baseTest';
+import { UploaderLocators as locators } from '../locators/UploaderLocators';
+
+test.describe('Upup Uploader Component - Full Validation', () => {
+  test.beforeEach(async ({ uploaderPage }) => {
+    await uploaderPage.goTo();
+  });
+
+  test('should display initial upload instructions', async ({ uploaderPage }) => {
+    await expect(uploaderPage.uploaderRegion).toContainText(locators.messages.dropInstructions);
+  });
+
+  test('should handle selection of 10 files', async ({ uploaderPage }) => {
+    const files = Array.from({ length: 10 }, (_, i) => `test-files/image${i + 1}.jpg`);
+
+    await uploaderPage.uploadFiles(files);
+
+    await expect(uploaderPage.uploaderRegion).toContainText('10 files selected');
+  });
+
+  test('should allow removing all files to reset state', async ({ uploaderPage }) => {
+    await uploaderPage.uploadFiles(['test-files/image1.jpg', 'test-files/image2.jpg']);
+    await uploaderPage.removeAllFiles();
+
+    await expect(uploaderPage.uploaderRegion).toContainText(locators.messages.dropInstructions);
+  });
+
+  test('BUG: upload button should disable after clicking', async ({ uploaderPage, page }) => {
+    test.fail(true, 'Known issue: Upload button remains visible and active after click');
+
+    await uploaderPage.uploadFiles(['test-files/image1.jpg']);
+    const uploadBtn = page.getByRole('button', { name: 'Upload 1 file' });
+
+    await uploadBtn.click();
+
+    await expect(uploadBtn).not.toBeVisible({ timeout: 5000 });
+  });
+});

packages/upup/src/frontend/components/FileList.tsx

@@ -88,7 +88,8 @@ export default memo(function FileList() {
                     classNames.fileListFooter,
                 )}
             >
-                <ShouldRender if={uploadStatus !== UploadStatus.SUCCESSFUL}>
+                {/* FIX: Hide upload button when status is SUCCESSFUL or FAILED */}
+                <ShouldRender if={uploadStatus !== UploadStatus.SUCCESSFUL && uploadStatus !== UploadStatus.FAILED}>
                     <button
                         className={cn(
                             'upup-disabled:animate-pulse upup-ml-auto upup-rounded-full upup-bg-blue-600 upup-px-4 upup-py-2 upup-text-sm upup-font-medium upup-text-white',
@@ -133,4 +134,4 @@ export default memo(function FileList() {
             </div>
         </div>
     )
-})
+})