possibly fix file upload bug that sometimes the upload does not work

Author: Logende

meta_configurator/e2e/csvImport.spec.ts

@@ -8,6 +8,7 @@ import {
     setCsvTablePath,
     submitCsvImport,
     uploadCsvFile,
+    uploadCsvFileAndCheckProgress,
 } from './utilsCsvImport';
 import {SessionMode} from '../src/store/sessionMode';
 
@@ -48,3 +49,22 @@ test('Import CSV with custom table path and renamed column', async ({page}) => {
         ],
     });
 });
+
+test('CSV file upload progresses reliably for 15 consecutive attempts in the same session without reload', async ({page}) => {
+    test.setTimeout(60000);
+    await openApp(page, 'settings_testpanel.json');
+
+    for (let attempt = 1; attempt <= 15; attempt++) {
+        await test.step(`csv upload attempt ${attempt}`, async () => {
+            await openCsvImportDialog(page);
+            try {
+                await uploadCsvFileAndCheckProgress(page, 'data_people.csv', 4000);
+            } catch (error) {
+                throw new Error(`CSV upload attempt ${attempt} got stuck before parsing completed`, {
+                    cause: error instanceof Error ? error : undefined,
+                });
+            }
+            await submitCsvImport(page);
+        });
+    }
+});

meta_configurator/e2e/utilsCsvImport.ts

@@ -19,6 +19,18 @@ export async function uploadCsvFile(page: Page, filename: string) {
     await expect(page.getByTestId('csv-submit-import')).toBeVisible();
 }
 
+export async function uploadCsvFileAndCheckProgress(page: Page, filename: string, timeoutMs: number = 5000) {
+    const [fileChooser] = await Promise.all([
+        page.waitForEvent('filechooser', {timeout: timeoutMs}),
+        page.getByTestId('csv-select-file').click({timeout: timeoutMs}),
+    ]);
+    await fileChooser.setFiles(path.join(fixturesDir, filename));
+    await expect(
+        page.getByTestId('csv-submit-import'),
+        'CSV import dialog did not progress past file selection'
+    ).toBeVisible({timeout: timeoutMs});
+}
+
 export async function expandImportOptions(page: Page) {
     await page.getByTestId('csv-import-options-toggle').click();
 }

meta_configurator/src/components/toolbar/dialogs/csvimport/importCsvUtils.ts

@@ -1,4 +1,3 @@
-import {useFileDialog} from '@vueuse/core';
 import {readFileContentToStringRef} from '@/utility/readFileContent';
 import type {Ref} from 'vue';
 import {getDataForMode, getSchemaForMode} from '@/data/useDataLink';
@@ -18,27 +17,18 @@ import type {JsonSchemaType} from '@/schema/jsonSchemaType';
 import {identifyArraysInJson} from '@/utility/arrayPathUtils';
 import {stringToIdentifier} from '@/utility/stringToIdentifier';
 import {useErrorService} from '@/utility/errorServiceInstance';
+import {createLazySingleFileDialog} from '@/utility/fileDialogUtils';
 
-export function requestUploadFileToRef(resultString: Ref<string>, resultTableName: Ref<string>) {
-  const {open, onChange, reset} = useFileDialog({
-    // accept only json, schema.json, yaml, yml, xml and xsd files
-    accept: '.csv',
-    multiple: false,
-  });
+const csvFileDialog = createLazySingleFileDialog('.csv');
 
-  onChange((files: FileList | null) => {
+export function requestUploadFileToRef(resultString: Ref<string>, resultTableName: Ref<string>) {
+  csvFileDialog.openForSelection(files => {
     const firstFile = files?.[0];
     if (firstFile) {
       resultTableName.value = stringToIdentifier(firstFile.name, true); // Get the name of the first file
       readFileContentToStringRef(files, resultString);
     }
-    reset(); // Reset the file dialog after selection
   });
-
-  // opening it with a small delay might fix the issue of the dialog opening but onChange never triggering
-  setTimeout(() => {
-    open();
-  }, 3);
 }
 
 export function inferSchemaForNewDataAndMergeIntoCurrentSchema(

meta_configurator/src/components/toolbar/dialogs/turtle-import/importTurtleUtils.ts

@@ -1,26 +1,17 @@
-import {useFileDialog} from '@vueuse/core';
 import {readFileContentToStringRef} from '@/utility/readFileContent';
 import {RdfMediaType} from '@/components/panels/rdf/rdfEnums';
 import {useSettings} from '@/settings/useSettings';
 import type {Ref} from 'vue';
 import * as $rdf from 'rdflib';
+import {createLazySingleFileDialog} from '@/utility/fileDialogUtils';
 
 const settings = useSettings();
+const turtleFileDialog = createLazySingleFileDialog('.ttl');
 
 export function requestUploadFileToRef(resultString: Ref<string>): void {
-  const {open, onChange, reset} = useFileDialog({
-    accept: '.ttl',
-    multiple: false,
+  turtleFileDialog.openForSelection(files => {
+    readFileContentToStringRef(files, resultString);
   });
-
-  onChange((files: FileList | null) => {
-    if (files && files.length > 0) {
-      readFileContentToStringRef(files, resultString);
-    }
-    reset();
-  });
-
-  setTimeout(open, 3);
 }
 
 /**

meta_configurator/src/components/toolbar/importFile.ts

@@ -1,29 +1,22 @@
-import {useFileDialog} from '@vueuse/core';
 import {readFileContentForFunction} from '@/utility/readFileContent';
 import {getDataForMode} from '@/data/useDataLink';
 import {SessionMode} from '@/store/sessionMode';
 import type {ManagedData} from '@/data/managedData';
 import {findAvailableSchemaId} from '@/schema/schemaReadingUtils';
+import {createLazySingleFileDialog} from '@/utility/fileDialogUtils';
+
+const importSchemaFileDialog = createLazySingleFileDialog(
+  '.json, .yaml, .yml, .xml, .schema.json',
+  5
+);
 
 /**
  * Opens a file dialog to select a JSON schema to import.
  */
 export function openImportSchemaDialog(): void {
-  const {open, onChange, reset} = useFileDialog({
-    // accept only json, schema.json, yaml, yml, xml and xsd files
-    accept: '.json, .yaml, .yml, .xml, .schema.json',
-    multiple: false,
-  });
-
-  onChange((files: FileList | null) => {
+  importSchemaFileDialog.openForSelection(files => {
     readFileContentForFunction(files, importSchema);
-    reset(); // Reset the file dialog after selection
   });
-
-  // opening it with a small delay might fix the issue of the dialog opening but onChange never triggering
-  setTimeout(() => {
-    open();
-  }, 5);
 }
 
 function importSchema(importedSchema: any) {

meta_configurator/src/components/toolbar/uploadFile.ts

@@ -1,30 +1,20 @@
-import {useFileDialog} from '@vueuse/core';
 import {readFileContentToDataLink} from '@/utility/readFileContent';
 import {getDataForMode} from '@/data/useDataLink';
 import type {ManagedData} from '@/data/managedData';
 import {SessionMode} from '@/store/sessionMode';
+import {createLazySingleFileDialog} from '@/utility/fileDialogUtils';
+
+const uploadDataFileDialog = createLazySingleFileDialog('.json, .yaml, .yml, .xml, .schema.json');
 
 /**
  * Opens a file dialog to select a file to upload.
  *
  * @param resultDataLink The DataLink to which the file content should be written
  */
 export function openUploadFileDialog(resultDataLink: ManagedData): void {
-  const {open, onChange, reset} = useFileDialog({
-    // accept only json, schema.json, yaml, yml, xml and xsd files
-    accept: '.json, .yaml, .yml, .xml, .schema.json',
-    multiple: false,
-  });
-
-  onChange((files: FileList | null) => {
+  uploadDataFileDialog.openForSelection(files => {
     readFileContentToDataLink(files, resultDataLink);
-    reset(); // Reset the file dialog after selection
   });
-
-  // opening it with a small delay might fix the issue of the dialog opening but onChange never triggering
-  setTimeout(() => {
-    open();
-  }, 3);
 }
 
 /**