Adding a file chooser to import GPX files

src/components/map/gpx-import.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+
+import { Geolocation } from '@awesome-cordova-plugins/geolocation';
+import { useDispatch } from 'react-redux';
+
+import { mapActions } from '../../store/map';
+
+import '../../theme/get-location.css';
+import { IonIcon, IonItem } from '@ionic/react';
+import { downloadSharp } from 'ionicons/icons';
+
+const GpxImport: React.FC<{}> = () => {
+  const dispatch = useDispatch();
+
+  const onChangeHandler = (event: any) => {
+    console.log('On change handler');
+    const file = event.target.files[0];
+    const fileReader = new FileReader();
+    fileReader.readAsText(file);
+
+    fileReader.addEventListener(
+      'load',
+      () => {
+        // this will then display a text file
+        console.log(fileReader.result);
+      },
+      false
+    );
+  };
+
+  return (
+    <IonItem>
+      <input
+        type='file'
+        id='gpx-import'
+        className='input-file'
+        accept='.gpx'
+        onChange={onChangeHandler}
+      />
+      <label htmlFor='gpx-import'>
+        <IonIcon slot='icon-only' icon={downloadSharp} />
+      </label>
+    </IonItem>
+  );
+};
+
+export default GpxImport;

src/components/map/map.tsx

@@ -14,9 +14,12 @@ import {
   IonButtons,
   IonContent,
   IonFooter,
+  IonHeader,
   IonToolbar,
 } from '@ionic/react';
 
+import GpxImport from './gpx-import';
+
 const Map: react.FC<{}> = (props: {}) => {
   const dispatch = useDispatch();
 
@@ -47,6 +50,13 @@ const Map: react.FC<{}> = (props: {}) => {
           </Layer>
         </IonApp>
       </IonContent>
+      <IonHeader className='ion-no-border' translucent={true}>
+        <IonToolbar>
+          <IonButtons slot='end'>
+            <GpxImport />
+          </IonButtons>
+        </IonToolbar>
+      </IonHeader>
       <IonFooter className='ion-no-border'>
         <IonToolbar>
           <IonButtons>

src/theme/map.css

@@ -12,3 +12,12 @@ ion-button.get-location {
   --ion-background-color: white;
   margin-left: calc(50% - 20px);
 }
+
+.input-file {
+	width: 0.1px;
+	height: 0.1px;
+	opacity: 0;
+	overflow: hidden;
+	position: absolute;
+	z-index: -1;
+}

trapeze.config.yaml

@@ -12,3 +12,4 @@ platforms:
           <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
           <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />          
           <uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION" />
+          <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />