Retrieving GPX import from master.

src/components/dialogs/GpxImport.module.css

@@ -0,0 +1,8 @@
+.inputFile {
+  width: 0.1px;
+  height: 0.1px;
+  opacity: 0;
+  overflow: hidden;
+  position: absolute;
+  z-index: -1;
+}

src/components/dialogs/GpxImport.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+
+import GPX from '../../lib/gpx-parser-builder/src/gpx';
+
+import css from './GpxImport.module.css';
+import { IonIcon, IonItem } from '@ionic/react';
+import { cloudUpload } from 'ionicons/icons';
+
+const GpxImport: React.FC<{}> = () => {
+  const onChangeHandler = (event: any) => {
+    console.log('On change handler');
+    const file: 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);
+        const gpx = GPX.parse(fileReader.result);
+        console.log(`gpx: ${JSON.stringify(gpx)}`);
+        // pushGpx(db, {
+        //   gpx,
+        //   metadata: {
+        //     lastModified: new Date(file.lastModified).toISOString(),
+        //     importDate: new Date().toISOString(),
+        //     name: file.name,
+        //     size: file.size,
+        //     type: file.type,
+        //   },
+        // });
+      },
+      false
+    );
+  };
+
+  return (
+    <IonItem>
+      <input
+        type='file'
+        id='gpx-import'
+        className={css.inputFile}
+        accept='.gpx'
+        onChange={onChangeHandler}
+      />
+      <label htmlFor='gpx-import'>
+        <IonIcon slot='icon-only' icon={cloudUpload} title='import' />
+      </label>
+    </IonItem>
+  );
+};
+
+export default GpxImport;