drag & drop file to export/import tab

packages/web/src/impexp/ImportExportConfigurator.svelte

@@ -67,10 +67,12 @@
   import SourceName from './SourceName.svelte';
 
   import SourceTargetConfig from './SourceTargetConfig.svelte';
+  import useEffect from '../utility/useEffect';
 
   // export let uploadedFile = undefined;
   // export let openedFile = undefined;
   export let previewReaderStore;
+  export let isTabActive;
 
   const { values, setFieldValue } = getFormContext();
 
@@ -113,36 +115,20 @@
       previewSource.set
     );
     // setFieldValue('sourceList', [...(sourceList || []), file.originalName]);
-  };
+  }
 
-  onMount(() => {
-    setUploadListener(addUploadedFile);
-    // if (uploadedFile) {
-    //   handleUpload(uploadedFile);
-    // }
-    // if (openedFile) {
-    //   handleUpload(openedFile);
-    //   // addFilesToSourceList(
-    //   //   $extensions,
-    //   //   [
-    //   //     {
-    //   //       fileName: openedFile.filePath,
-    //   //       shortName: openedFile.shortName,
-    //   //     },
-    //   //   ],
-    //   //   $values,
-    //   //   values,
-    //   //   !sourceList || sourceList.length == 0 ? openedFile.storageType : null,
-    //   //   previewSource.set
-    //   // );
-    // }
-
-    return () => {
-      setUploadListener(null);
-    };
+  $: effectActiveTab = useEffect(() => {
+    if (isTabActive) {
+      setUploadListener(addUploadedFile);
+      return () => {
+        setUploadListener(null);
+      };
+    } else {
+      return () => {};
+    }
   });
-  //   engine={sourceEngine}
-  //       {setPreviewSource}
+
+  $effectActiveTab;
 </script>
 
 <div class="flex1">

packages/web/src/tabs/ImportExportTab.svelte

@@ -16,7 +16,14 @@
   import { getDefaultFileFormat } from '../plugins/fileformats';
   import RunnerOutputFiles from '../query/RunnerOutputFiles.svelte';
   import SocketMessageView from '../query/SocketMessageView.svelte';
-  import { currentArchive, currentDatabase, extensions, visibleWidgetSideBar, selectedWidget } from '../stores';
+  import {
+    currentArchive,
+    currentDatabase,
+    extensions,
+    visibleWidgetSideBar,
+    selectedWidget,
+    activeTabId,
+  } from '../stores';
   import { apiCall, apiOff, apiOn } from '../utility/api';
   import createRef from '../utility/createRef';
   import openNewTab from '../utility/openNewTab';
@@ -104,7 +111,7 @@
     }
   }
 
-  $: effect = useEffect(() => registerRunnerDone(runnerId));
+  $: effectRunner = useEffect(() => registerRunnerDone(runnerId));
 
   function registerRunnerDone(rid) {
     if (rid) {
@@ -117,7 +124,7 @@
     }
   }
 
-  $: $effect;
+  $: $effectRunner;
 
   const handleRunnerDone = () => {
     busy = false;
@@ -172,7 +179,11 @@
   <FormProviderCore values={formValues}>
     <HorizontalSplitter initialValue="70%">
       <div class="content" slot="1">
-        <ImportExportConfigurator bind:this={domConfigurator} {previewReaderStore} />
+        <ImportExportConfigurator
+          bind:this={domConfigurator}
+          {previewReaderStore}
+          isTabActive={tabid == $activeTabId}
+        />
 
         {#if busy}
           <LoadingInfo wrapper message="Processing import/export ..." />