Adding a file chooser to import GPX files

This commit is contained in:
Eric van der Vlist 2022-09-22 15:47:41 +02:00
parent 7447cfd128
commit c545ff1d15
4 changed files with 67 additions and 0 deletions

View File

@ -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;

View File

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

View File

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

View File

@ -12,3 +12,4 @@ platforms:
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> <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_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />