55 lines
1.4 KiB
TypeScript
55 lines
1.4 KiB
TypeScript
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;
|