Hybrid implementation for GPXexport (#9) using the capacitor FileSystem plugin when needed. The export is done in the Documents/Download folder and there is no notification (yet).

src/components/map/GpxExport.tsx

@@ -1,15 +1,19 @@
-import { IonButton, IonIcon } from '@ionic/react';
+import { IonButton, IonIcon, isPlatform } from '@ionic/react';
 import { cloudDownload } from 'ionicons/icons';
 import React, { Fragment, useRef } from 'react';
+import { Filesystem, Directory, Encoding } from '@capacitor/filesystem';
 import { useDB } from 'react-pouchdb';
 import { getGpxAsXmlString } from '../../db/gpx';
 
 const GpxExport: React.FC<{ gpx: any }> = (props: { gpx: any }) => {
   const db = useDB();
 
+  const isCapacitor = isPlatform('capacitor');
+  console.log(`isPlatform('capacitor'): ${isPlatform('capacitor')}`);
+
   const hiddenLinkElement = useRef<HTMLAnchorElement>(null);
 
-  var downloadName;
+  var downloadName: string;
 
   if (props.gpx.metadata.name !== undefined) {
     downloadName = props.gpx.metadata.name;
@@ -24,16 +28,35 @@ const GpxExport: React.FC<{ gpx: any }> = (props: { gpx: any }) => {
     console.log('download()');
     const gpxAsXml = await getGpxAsXmlString(db, props.gpx._id);
     console.log(`gpxAsXml: ${gpxAsXml}`);
-    const blob = new Blob([gpxAsXml], {
-      type: 'application/gpx+xml',
-    });
-    const fileDownloadUrl = URL.createObjectURL(blob);
-    console.log(`fileDownloadUrl: ${fileDownloadUrl}`);
-    console.log(`hiddenLinkElement.current: ${hiddenLinkElement.current}`);
-    hiddenLinkElement.current!.href = fileDownloadUrl;
-    hiddenLinkElement.current?.click();
-    URL.revokeObjectURL(fileDownloadUrl);
-    hiddenLinkElement.current!.href = '';
+    if (isCapacitor) {
+      await Filesystem.writeFile({
+        path: `Download/${downloadName}`,
+        data: gpxAsXml,
+        directory: Directory.Documents,
+        encoding: Encoding.UTF8,
+        recursive: true,
+      });
+    } else {
+      const blob = new Blob([gpxAsXml], {
+        type: 'application/gpx+xml',
+      });
+      const fileDownloadUrl = URL.createObjectURL(blob);
+      console.log(`fileDownloadUrl: ${fileDownloadUrl}`);
+      console.log(
+        `hiddenLinkElement.current, href: ${
+          hiddenLinkElement.current!.href
+        }, click: ${hiddenLinkElement.current!.click}`
+      );
+      hiddenLinkElement.current!.href = fileDownloadUrl;
+      hiddenLinkElement.current?.click();
+      console.log(
+        `hiddenLinkElement.current, href: ${
+          hiddenLinkElement.current!.href
+        }, click: ${hiddenLinkElement.current!.click}`
+      );
+      URL.revokeObjectURL(fileDownloadUrl);
+      hiddenLinkElement.current!.href = '';
+    }
   };
 
   return (
@@ -41,9 +64,11 @@ const GpxExport: React.FC<{ gpx: any }> = (props: { gpx: any }) => {
       <IonButton id='gpx-export-button' onClick={download}>
         <IonIcon icon={cloudDownload} title='Export' slot='icon-only' />
       </IonButton>
-      <a className='hidden' download={downloadName} ref={hiddenLinkElement}>
-        download
-      </a>
+      {isCapacitor && (
+        <a className='hidden' download={downloadName} ref={hiddenLinkElement}>
+          download
+        </a>
+      )}
     </Fragment>
   );
 };

src/db/gpx.ts

@@ -172,12 +172,13 @@ export const deleteCurrent = async (db: any) => {
 };
 
 export const getGpx = async (db: any, gpxId: string) => {
+  console.log(`getGpx(db, "${gpxId}")`);
   var gpxResult = await db.get(gpxId);
   var gpx = gpxResult.gpx;
   var trkptResults = await db.find({
     selector: {
       type: 'trkpt',
-      gpx: gpx._id,
+      gpx: gpxId,
     },
   });
   var trkpts = trkptResults.docs;