fix(#39): file picking and clean up init logic (#99)

Author: dabrad26

example/public/sdk-code.js

@@ -23,9 +23,9 @@ function initializeAspera(supportMulti, httpGatewayUrl, forceHttpGateway) {
    * HTTP Gateway URL can be set to support fallback to a gateway.
    * You can also force it to not start the desktop app.
    */
-  asperaSdk.init({appId, supportMultipleUsers, httpGatewayUrl, forceHttpGateway}).then(() => {
+  asperaSdk.init({appId, supportMultipleUsers, httpGatewayUrl, forceHttpGateway}).then(response => {
     // The SDK started. Transfers and file picker can now be used.
-    alert('SDK started');
+    alert(`SDK started\n\n${JSON.stringify(response, undefined, 2)}`)
   }).catch(error => {
     // The SDK could not start. The app may not be running.
     console.error('SDK could not start', error);

example/src/App/index.tsx

@@ -1,7 +1,7 @@
 import './App.scss';
 import { init, launch, testConnection } from '@ibm-aspera/sdk';
 import { Header, HeaderGlobalAction, HeaderGlobalBar, HeaderName, Theme, Tab, TabList, Tabs, Button } from '@carbon/react';
-import { LogoGithub, Notification, NotificationOff, Sdk } from '@carbon/icons-react';
+import { LogoGithub, Notification, NotificationOff, Sdk, Reset } from '@carbon/icons-react';
 import { Route, Routes, useLocation, useNavigate } from 'react-router';
 import { useEffect, useState } from 'react';
 import hljs from 'highlight.js/lib/core';
@@ -83,6 +83,11 @@ export default function App() {
     setDisableAlert(newValue);
   }
 
+  const resetTestApp = (): void => {
+    localStorage.clear();
+    window.location.reload();
+  }
+
   const openPath = (path: string): void => {
     navigate(path);
   };
@@ -91,6 +96,9 @@ export default function App() {
     <Header aria-label="Carbon Tutorial">
       <HeaderName prefix="IBM Aspera">JavaScript SDK Test Application</HeaderName>
       <HeaderGlobalBar>
+        <HeaderGlobalAction aria-label="Reset test app" tooltipAlignment="end" className="action-icons" onClick={resetTestApp}>
+          <Reset size={20} />
+        </HeaderGlobalAction>
         <HeaderGlobalAction aria-label={disableAlert ? 'Enable alerts (needs reload)' : 'Disable alerts'} tooltipAlignment="end" className="action-icons" onClick={toggleAlert}>
           {disableAlert ? <Notification size={20} /> : <NotificationOff size={20} />}
         </HeaderGlobalAction>

example/src/Views/Initialize.tsx

@@ -4,21 +4,27 @@ import { useEffect, useState } from 'react';
 import hljs from 'highlight.js';
 
 export default function Initialize() {
-  const [gatewayServer, setGatewayServer] = useState('');
+  const [gatewayServer, setGatewayServer] = useState(localStorage.getItem('ASPERA-SDK-GATEWAY') || '');
 
   useEffect(() => {
     document.querySelector('.cds--snippet-container > pre > code')?.classList.add('language-javascript');
     hljs.highlightAll();
   }, []);
 
+  const setGatewayUrl = (value: string): void => {
+    localStorage.setItem('ASPERA-SDK-GATEWAY', value);
+    setGatewayServer(value);
+  }
+
   return (
     <div className="example-pages">
       <h2>Code example</h2>
       <CodeSnippet type="multi" feedback="Copied to clipboard" maxCollapsedNumberOfRows={25}>{window.initializeAspera.toString()}</CodeSnippet>
       <h2>Try it out</h2>
-      <TextInput id="gateway-server-id" className="code-input" value={gatewayServer} onChange={value => setGatewayServer(value.target.value)} labelText="HTTP Gateway URL" helperText="The HTTP Gateway Server to start up with Desktop" />
       <Button onClick={() => window.initializeAspera(false, gatewayServer, false)}>Initialize SDK</Button>
       <Button onClick={() => window.initializeAspera(true, gatewayServer, false)}>Initialize SDK (multi user)</Button>
+      <Button onClick={() => window.initializeAspera(true, gatewayServer, true)}>Initialize SDK (force gateway)</Button>
+      <TextInput id="gateway-server-id" className="code-input" value={gatewayServer} onChange={value => setGatewayUrl(value.target.value)} labelText="HTTP Gateway URL" helperText="The HTTP Gateway Server to start up with Desktop" />
     </div>
   );
 };

example/vite.config.ts

@@ -13,7 +13,7 @@ export default defineConfig({
   },
   plugins: [
     react(),
-    basicSsl()
+    // basicSsl()
   ],
   assetsInclude: ['**/*.md'],
   server: {

src/app/core.ts

@@ -1,9 +1,10 @@
 import {messages} from '../constants/messages';
 import {client} from '../helpers/client/client';
 import {errorLog, generateErrorBody, generatePromiseObjects, isValidTransferSpec, randomUUID, throwError} from '../helpers/helpers';
-import { getApiCall } from '../http-gateway/core';
+import {getApiCall, handleHttpGatewayDrop, httpGatewaySelectFileDialog, httpGatewaySelectFolderDialog} from '../http-gateway/core';
+import {HttpGatewayInfo} from '../http-gateway/models';
 import {asperaSdk} from '../index';
-import {AsperaSdkInfo, TransferResponse} from '../models/aspera-sdk.model';
+import {AsperaSdkInfo, AsperaSdkClientInfo, TransferResponse} from '../models/aspera-sdk.model';
 import {CustomBrandingOptions, DataTransferResponse, AsperaSdkSpec, BrowserStyleFile, AsperaSdkTransfer, FileDialogOptions, FolderDialogOptions, InitOptions, ModifyTransferOptions, ResumeTransferOptions, SafariExtensionEvent, TransferSpec, WebsocketEvent} from '../models/models';
 
 /**
@@ -14,21 +15,24 @@ import {CustomBrandingOptions, DataTransferResponse, AsperaSdkSpec, BrowserStyle
  */
 export const testConnection = (): Promise<any> => {
   return client.request('get_info')
-    .then((data: AsperaSdkInfo) => {
-      asperaSdk.globals.AsperaSdkInfo = data;
+    .then((data: AsperaSdkClientInfo) => {
+      asperaSdk.globals.asperaSdkInfo = data;
       asperaSdk.globals.asperaAppVerified = true;
-      return data;
+      return asperaSdk.globals.sdkResponseData;
     });
 };
 
 /**
- * Initialize drag and drop.
+ * Initialize drag and drop. HTTP Gateway does not need to init.
+ * Ignore if only HTTP Gateway
  * @param initCall - Indicate if called via init flow and should not reject
  *
  * @returns a promise that resolves if the initialization was successful or not
  */
 export const initDragDrop = (initCall?: boolean): Promise<boolean> => {
-  if (!asperaSdk.isReady) {
+  if (asperaSdk.useHttpGateway) {
+    return Promise.resolve(true);
+  } else if (!asperaSdk.isReady) {
     return throwError(messages.serverNotVerified);
   }
 
@@ -89,6 +93,7 @@ export const init = (options?: InitOptions): Promise<any> => {
     return asperaSdk.activityTracking.setup()
       .then(() => testConnection())
       .then(() => initDragDrop(true))
+      .then(() => asperaSdk.globals.sdkResponseData)
       .catch(handleErrors);
   };
 
@@ -105,16 +110,20 @@ export const init = (options?: InitOptions): Promise<any> => {
 
     asperaSdk.globals.httpGatewayUrl = finalHttpGatewayUrl;
 
-    return getApiCall('INFO').then(() => {
+    return getApiCall('INFO').then((response: HttpGatewayInfo) => {
+      asperaSdk.globals.httpGatewayInfo = response;
       asperaSdk.globals.httpGatewayVerified = true;
 
       if (options.forceHttpGateway) {
-        return asperaSdk.activityTracking.setup()
-          .then(() => initDragDrop(true))
-          .catch(handleErrors);
+        return Promise.resolve(asperaSdk.globals.sdkResponseData);
       } else {
         return getDesktopStartCalls();
       }
+    }).catch(error => {
+      // If HTTP Gateway fails log and move on to desktop
+      errorLog(messages.httpInitFail, error);
+
+      return getDesktopStartCalls();
     });
   }
 
@@ -338,7 +347,9 @@ export const resumeTransfer = (id: string, options?: ResumeTransferOptions): Pro
  * @returns a promise that resolves with the selected file(s) and rejects if user cancels dialog
  */
 export const showSelectFileDialog = (options?: FileDialogOptions): Promise<DataTransferResponse> => {
-  if (!asperaSdk.isReady) {
+  if (asperaSdk.useHttpGateway) {
+    return httpGatewaySelectFileDialog(options);
+  } else if (!asperaSdk.isReady) {
     return throwError(messages.serverNotVerified);
   }
 
@@ -367,7 +378,9 @@ export const showSelectFileDialog = (options?: FileDialogOptions): Promise<DataT
  * @returns a promise that resolves with the selected folder(s) and rejects if user cancels dialog
  */
 export const showSelectFolderDialog = (options?: FolderDialogOptions): Promise<DataTransferResponse> => {
-  if (!asperaSdk.isReady) {
+  if (asperaSdk.useHttpGateway) {
+    return httpGatewaySelectFolderDialog(options);
+  } else if (!asperaSdk.isReady) {
     return throwError(messages.serverNotVerified);
   }
 
@@ -567,7 +580,7 @@ export const setBranding = (id: string, options: CustomBrandingOptions): Promise
  * @param elementSelector the selector of the element on the page that should watch for drop events
  */
 export const createDropzone = (
-  callback: (data: {event: any; files: DataTransferResponse}) => void,
+  callback: (data: {event: DragEvent; files: DataTransferResponse}) => void,
   elementSelector: string,
 ): void => {
   const elements = document.querySelectorAll(elementSelector);
@@ -576,16 +589,19 @@ export const createDropzone = (
     return;
   }
 
-  const dragEvent = (event: any) => {
+  const dragEvent = (event: DragEvent) => {
     event.preventDefault();
   };
 
-  const dropEvent = (event: any) => {
+  const dropEvent = (event: DragEvent) => {
     event.preventDefault();
-    const files: BrowserStyleFile[] = [];
     if (event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files.length && event.dataTransfer.files[0]) {
+      const files: BrowserStyleFile[] = [];
+      const rawFiles: File[] = [];
+
       for (let i = 0; i < event.dataTransfer.files.length; i++) {
         const file = event.dataTransfer.files[i];
+        rawFiles.push(file);
         files.push({
           lastModified: file.lastModified,
           name: file.name,
@@ -599,11 +615,17 @@ export const createDropzone = (
         app_id: asperaSdk.globals.appId,
       };
 
-      client.request('dropped_files', payload)
-        .then((data: any) => callback({event, files: data}))
-        .catch(error => {
-          errorLog(messages.unableToReadDropped, error);
-        });
+      handleHttpGatewayDrop(rawFiles);
+
+      if (asperaSdk.isReady) {
+        client.request('dropped_files', payload)
+          .then((data: any) => callback({event, files: data}))
+          .catch(error => {
+            errorLog(messages.unableToReadDropped, error);
+          });
+      } else {
+        callback({event, files: {dataTransfer: {files}}});
+      }
     }
   };
 
@@ -646,6 +668,6 @@ export const getInfo = (): Promise<AsperaSdkInfo> => {
   }
 
   return new Promise((resolve, _) => {
-    resolve(asperaSdk.globals.AsperaSdkInfo);
+    resolve(asperaSdk.globals.sdkResponseData);
   });
 };

src/constants/messages.ts

@@ -28,4 +28,5 @@ export const messages = {
   websocketClosedUnexpect: 'The websocket was closed unexpectedly',
   websocketNotReady: 'The websocket is not ready. Run init first',
   httpNotAvailable: 'IBM Aspera HTTP Gateway is not available',
+  httpInitFail: 'IBM Aspera HTTP Gateway could not be started',
 };

src/http-gateway/core.ts

@@ -1,4 +1,5 @@
 import {asperaSdk} from '../index';
+import {FileDialogOptions, DataTransferResponse} from '../models/models';
 import {HttpGatewayDownload, HttpGatewayDownloadLegacy, HttpGatewayInfo, HttpGatewayPresign, HttpGatewayUpload} from './models';
 
 /**
@@ -45,3 +46,35 @@ export const getApiCall = (type: 'INFO'|'DOWNLOAD'|'UPLOAD'|'PRESIGN', body?: Bo
     return response.body;
   });
 };
+
+/**
+ * Handle drop events and store files for HTTP Gateway
+ * This works on top of desktop.
+ */
+export const handleHttpGatewayDrop = (files: File[]): void => {
+  files.forEach(file => {
+    asperaSdk.httpGatewaySelectedFiles.set(file.name, file);
+  });
+};
+
+/**
+ * Open native browser file picker for files
+ *
+ * @param options - File picker options
+ *
+ * @returns Promise that resolves with info about the files picked
+ */
+export const httpGatewaySelectFileDialog = (options?: FileDialogOptions): Promise<DataTransferResponse> => {
+  return Promise.reject('TODO: Select file. Need to create form since showOpenFilePicker has limited browser support');
+};
+
+/**
+ * Open native browser file picker for folders
+ *
+ * @param options - File picker options
+ *
+ * @returns Promise that resolves with info about the folders picked
+ */
+export const httpGatewaySelectFolderDialog = (options?: FileDialogOptions): Promise<DataTransferResponse> => {
+  return Promise.reject('TODO: Select folder. Need to create form since showOpenFilePicker has limited browser support');
+};

src/http-gateway/download.ts

@@ -15,7 +15,7 @@ import {messages} from '../constants/messages';
  * You may not need to import anything from this file.
  */
 export const httpDownload = (transferSpec: TransferSpec): Promise<AsperaSdkTransfer> => {
-  if (!asperaSdk.supportsHttpGateway) {
+  if (!asperaSdk.httpGatewayIsReady) {
     return throwError(messages.serverNotVerified, {type: 'download'});
   }
 

src/http-gateway/index.ts

@@ -1,5 +1,6 @@
 import {httpDownload} from './download';
 import {httpUpload} from './upload';
+import {getApiCall, handleHttpGatewayDrop, httpGatewaySelectFileDialog, httpGatewaySelectFolderDialog} from './core';
 
 /**
  * HTTP Gateway Exports
@@ -12,4 +13,8 @@ import {httpUpload} from './upload';
 export {
   httpUpload,
   httpDownload,
+  getApiCall,
+  handleHttpGatewayDrop,
+  httpGatewaySelectFileDialog,
+  httpGatewaySelectFolderDialog
 };

src/http-gateway/models.ts

@@ -1,8 +1,8 @@
 export interface HttpGatewayInfo {
   version: string;
   name: string;
-  upload_endpoint: string;
-  download_endpoint: string;
+  upload_endpoint: string[];
+  download_endpoint: string[];
   endpoints: string[];
 }