Using the FileOpener plugin to open the GPX file after export (#9).

This commit is contained in:
Eric van der Vlist 2022-10-02 17:16:41 +02:00
parent ca28d767c0
commit 0b96918f3d
3 changed files with 28 additions and 1 deletions

19
package-lock.json generated
View File

@ -11,6 +11,7 @@
"@awesome-cordova-plugins/core": "^5.45.0", "@awesome-cordova-plugins/core": "^5.45.0",
"@awesome-cordova-plugins/geolocation": "^5.45.0", "@awesome-cordova-plugins/geolocation": "^5.45.0",
"@capacitor-community/background-geolocation": "^1.2.4", "@capacitor-community/background-geolocation": "^1.2.4",
"@capacitor-community/file-opener": "^1.0.1",
"@capacitor/android": "^4.2.0", "@capacitor/android": "^4.2.0",
"@capacitor/app": "4.0.1", "@capacitor/app": "4.0.1",
"@capacitor/cli": "^4.2.0", "@capacitor/cli": "^4.2.0",
@ -2035,6 +2036,18 @@
"@capacitor/core": ">=3.0.0" "@capacitor/core": ">=3.0.0"
} }
}, },
"node_modules/@capacitor-community/file-opener": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@capacitor-community/file-opener/-/file-opener-1.0.1.tgz",
"integrity": "sha512-jzfnUlwiSrwrbtg6W3jYucwRFDqxSWFx2/qzh4jddpSvmW395WVfDiq6GVAiQWjlZK4xflQ/XDFCyzInmB3FtQ==",
"engines": {
"node": ">=16.15.0 <17.0",
"npm": ">=8.10.0 <9.0"
},
"peerDependencies": {
"@capacitor/core": "^3.0.0 || ^4.0.0"
}
},
"node_modules/@capacitor/android": { "node_modules/@capacitor/android": {
"version": "4.2.0", "version": "4.2.0",
"resolved": "https://registry.npmjs.org/@capacitor/android/-/android-4.2.0.tgz", "resolved": "https://registry.npmjs.org/@capacitor/android/-/android-4.2.0.tgz",
@ -21041,6 +21054,12 @@
"integrity": "sha512-C3Q4/Qg5U/l8ZXUXwyweOI+W1HHxzXy1OmL8KxS1IvJUXKAlX4fNroEMwJ9b9DrcG8A2cbxIEGh1Wd1YyiiVZA==", "integrity": "sha512-C3Q4/Qg5U/l8ZXUXwyweOI+W1HHxzXy1OmL8KxS1IvJUXKAlX4fNroEMwJ9b9DrcG8A2cbxIEGh1Wd1YyiiVZA==",
"requires": {} "requires": {}
}, },
"@capacitor-community/file-opener": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@capacitor-community/file-opener/-/file-opener-1.0.1.tgz",
"integrity": "sha512-jzfnUlwiSrwrbtg6W3jYucwRFDqxSWFx2/qzh4jddpSvmW395WVfDiq6GVAiQWjlZK4xflQ/XDFCyzInmB3FtQ==",
"requires": {}
},
"@capacitor/android": { "@capacitor/android": {
"version": "4.2.0", "version": "4.2.0",
"resolved": "https://registry.npmjs.org/@capacitor/android/-/android-4.2.0.tgz", "resolved": "https://registry.npmjs.org/@capacitor/android/-/android-4.2.0.tgz",

View File

@ -6,6 +6,7 @@
"@awesome-cordova-plugins/core": "^5.45.0", "@awesome-cordova-plugins/core": "^5.45.0",
"@awesome-cordova-plugins/geolocation": "^5.45.0", "@awesome-cordova-plugins/geolocation": "^5.45.0",
"@capacitor-community/background-geolocation": "^1.2.4", "@capacitor-community/background-geolocation": "^1.2.4",
"@capacitor-community/file-opener": "^1.0.1",
"@capacitor/android": "^4.2.0", "@capacitor/android": "^4.2.0",
"@capacitor/app": "4.0.1", "@capacitor/app": "4.0.1",
"@capacitor/cli": "^4.2.0", "@capacitor/cli": "^4.2.0",

View File

@ -3,6 +3,7 @@ import { cloudDownload } from 'ionicons/icons';
import React, { Fragment, useRef } from 'react'; import React, { Fragment, useRef } from 'react';
import { Filesystem, Directory, Encoding } from '@capacitor/filesystem'; import { Filesystem, Directory, Encoding } from '@capacitor/filesystem';
import { useDB } from 'react-pouchdb'; import { useDB } from 'react-pouchdb';
import { FileOpener } from '@capacitor-community/file-opener';
import { getGpxAsXmlString } from '../../db/gpx'; import { getGpxAsXmlString } from '../../db/gpx';
const GpxExport: React.FC<{ gpx: any }> = (props: { gpx: any }) => { const GpxExport: React.FC<{ gpx: any }> = (props: { gpx: any }) => {
@ -29,13 +30,19 @@ const GpxExport: React.FC<{ gpx: any }> = (props: { gpx: any }) => {
const gpxAsXml = await getGpxAsXmlString(db, props.gpx._id); const gpxAsXml = await getGpxAsXmlString(db, props.gpx._id);
console.log(`gpxAsXml: ${gpxAsXml}`); console.log(`gpxAsXml: ${gpxAsXml}`);
if (isCapacitor) { if (isCapacitor) {
await Filesystem.writeFile({ const fileUrl = await Filesystem.writeFile({
path: `Download/${downloadName}`, path: `Download/${downloadName}`,
data: gpxAsXml, data: gpxAsXml,
directory: Directory.Documents, directory: Directory.Documents,
encoding: Encoding.UTF8, encoding: Encoding.UTF8,
recursive: true, recursive: true,
}); });
console.log(`fileUrl: ${fileUrl.uri}`);
await FileOpener.open({
filePath: fileUrl.uri,
contentType: 'application/gpx+xml',
openWithDefault: false,
});
} else { } else {
const blob = new Blob([gpxAsXml], { const blob = new Blob([gpxAsXml], {
type: 'application/gpx+xml', type: 'application/gpx+xml',