diff --git a/.changeset/few-plants-pump.md b/.changeset/few-plants-pump.md new file mode 100644 index 000000000..a094e2988 --- /dev/null +++ b/.changeset/few-plants-pump.md @@ -0,0 +1,5 @@ +--- +"@uppy/dashboard": patch +--- + +fix "My Device" button in dashboard, it now respects the fileManagerSelectionType. diff --git a/packages/@uppy/dashboard/src/index.browser.test.ts b/packages/@uppy/dashboard/src/index.browser.test.ts index 73169b9b0..4d5f03be6 100644 --- a/packages/@uppy/dashboard/src/index.browser.test.ts +++ b/packages/@uppy/dashboard/src/index.browser.test.ts @@ -204,63 +204,3 @@ test('Upload, pause, and resume functionality', async () => { // Verify upload completion state using Playwright selector await expect(page.getByText('Complete', { exact: true })).toBeVisible() }) - -test('My Device button triggers folder input when fileManagerSelectionType is "folders"', async () => { - render('
') - new Uppy().use(Dashboard, { - target: '#uppy', - inline: true, - fileManagerSelectionType: 'folders', - }) - - const inputs = document.querySelectorAll( - '.uppy-Dashboard-input', - ) as NodeListOf - const fileInput = inputs[0] - const folderInput = inputs[1] - - let fileInputClicked = false - let folderInputClicked = false - fileInput.addEventListener('click', () => { - fileInputClicked = true - }) - folderInput.addEventListener('click', () => { - folderInputClicked = true - }) - - const myDeviceButton = page.getByRole('tab', { name: /my device/i }) - await myDeviceButton.click() - - expect(folderInputClicked).toBe(true) - expect(fileInputClicked).toBe(false) -}) - -test('My Device button triggers file input when fileManagerSelectionType is "files"', async () => { - render('
') - new Uppy().use(Dashboard, { - target: '#uppy', - inline: true, - fileManagerSelectionType: 'files', - }) - - const inputs = document.querySelectorAll( - '.uppy-Dashboard-input', - ) as NodeListOf - const fileInput = inputs[0] - const folderInput = inputs[1] - - let fileInputClicked = false - let folderInputClicked = false - fileInput.addEventListener('click', () => { - fileInputClicked = true - }) - folderInput.addEventListener('click', () => { - folderInputClicked = true - }) - - const myDeviceButton = page.getByRole('tab', { name: /my device/i }) - await myDeviceButton.click() - - expect(fileInputClicked).toBe(true) - expect(folderInputClicked).toBe(false) -}) diff --git a/packages/@uppy/dashboard/src/index.test.ts b/packages/@uppy/dashboard/src/index.test.ts index f9f82c70b..72398e9f9 100644 --- a/packages/@uppy/dashboard/src/index.test.ts +++ b/packages/@uppy/dashboard/src/index.test.ts @@ -153,4 +153,106 @@ describe('Dashboard', () => { core.destroy() }) + + describe('My Device acquirer respects fileManagerSelectionType', () => { + // `showNativePhotoCameraButton: true` is used to force the My Device tab + // to render — Dashboard hides it when it would be the only entry in the list + // (see `hasOnlyMyDevice` in AddFiles.tsx). + const mountDashboard = ( + fileManagerSelectionType: 'files' | 'folders' | 'both', + ) => { + document.body.innerHTML = '' + const core = new Core() + core.use(DashboardPlugin, { + inline: true, + target: 'body', + fileManagerSelectionType, + showNativePhotoCameraButton: true, + }) + return core + } + + const getInputs = () => { + const fileInput = document.querySelector( + '.uppy-Dashboard-input:not([webkitdirectory])', + )! + const folderInput = document.querySelector( + '.uppy-Dashboard-input[webkitdirectory]', + )! + return { fileInput, folderInput } + } + + const clickMyDeviceTab = () => { + const tab = document.querySelector( + '[data-uppy-acquirer-id="MyDevice"] button[role="tab"]', + )! + tab.click() + } + + it('triggers the folder input when set to "folders"', () => { + const core = mountDashboard('folders') + const { fileInput, folderInput } = getInputs() + + let fileClicked = false + let folderClicked = false + fileInput.addEventListener('click', () => { + fileClicked = true + }) + folderInput.addEventListener('click', () => { + folderClicked = true + }) + + clickMyDeviceTab() + + expect(folderClicked).toBe(true) + expect(fileClicked).toBe(false) + + core.destroy() + }) + + it('triggers the file input when set to "files"', () => { + const core = mountDashboard('files') + const { fileInput, folderInput } = getInputs() + + let fileClicked = false + let folderClicked = false + fileInput.addEventListener('click', () => { + fileClicked = true + }) + folderInput.addEventListener('click', () => { + folderClicked = true + }) + + clickMyDeviceTab() + + expect(fileClicked).toBe(true) + expect(folderClicked).toBe(false) + + core.destroy() + }) + + // `both` mode intentionally falls back to the file picker because a single + // HTML cannot be webkitdirectory and not at the same time. The + // folder picker remains reachable via the tagline "browse folders" link. + it('falls back to the file input when set to "both"', () => { + const core = mountDashboard('both') + const { fileInput, folderInput } = getInputs() + + let fileClicked = false + let folderClicked = false + fileInput.addEventListener('click', () => { + fileClicked = true + }) + folderInput.addEventListener('click', () => { + folderClicked = true + }) + + clickMyDeviceTab() + + expect(fileClicked).toBe(true) + expect(folderClicked).toBe(false) + + core.destroy() + }) + }) })