Replacing a CSV file can import the previously selected file #37905

Bug Description

The Import CSV dialog can send the ID of a previously selected file. The dialog displays the replacement file's name. The import request then targets the previous file's rows.

This occurs while the replacement upload is pending. It also occurs after both uploads finish if the older upload completes last. An older upload error can also clear a newer successful selection.

To Reproduce

Use an existing data table with a string column named name and a number column named age.

Create A.csv:

name,age
Alpha,1

Create B.csv:

name,age
Beta,2

1. Open Import CSV for the table.
2. Select A.csv.
3. Wait for its upload to finish.
4. Select B.csv. Delay the response to this upload.
5. Observe that the dialog displays B.csv, but Import is still enabled.
6. Click Import while B's upload is pending.
7. Observe that the import request sends A's uploaded file ID.

For a second sequence, keep A's upload pending, then select B. Complete B's upload before A's upload. After both finish, Import still sends A's file ID while the dialog displays B.csv.

The component regression tests control response order with deferred promises. They exercise the real file input and capture the file ID sent to the import action. The UI sequences above describe those operations; a live browser/backend session was not used.

Expected behavior

Import stays disabled until the current file's upload completes and its columns are valid. Import then sends that file's ID. An older response or error does not change the current selection.

Debug Info

The issue was reproduced against master commit 33eb5c196e0ce3a2c71525929a4ef861cb94b168.

The component tests render ImportCsvModal.vue with its actual upload control. Upload and import API actions are mocked. The tests observe the incorrect file ID directly. The resulting row insertion follows from backend source inspection; no database write was performed during validation.

With the regression tests added to the base revision, 10 tests fail and 9 pass. The failures include the enabled Import button and the old file ID sent to the import action. With the fix applied, all 19 tests pass: 15 component tests and 4 existing useLatestFetch tests.

The fix and regression tests are available on the fork. To reproduce the failures, use a separate checkout at the base revision above. Copy only the updated ImportCsvModal.test.ts from that commit. From packages/frontend/editor-ui, run:

pnpm test src/features/core/dataTable/components/ImportCsvModal.test.ts src/app/composables/useLatestFetch.test.ts

The fix and regression tests were prepared with Codex assistance.

Operating System

macOS 27.0

n8n Version

Development checkout at 33eb5c196e0ce3a2c71525929a4ef861cb94b168. The CLI and editor package versions are 2.37.0.

Node.js Version

24.1.0. Package manager: pnpm 11.25.0.

Database

Not used. API actions are mocked in the component tests.

Execution mode

Not used. No workflow execution is needed to reproduce the component state.

Hosting

Local development checkout with a rendered test DOM. No cloud or self-hosted instance was used.