Allowing multiple Gpx files import

src/components/gpx-import/GpxImport.tsx

@@ -12,44 +12,54 @@ import { intToGpxId } from '../../lib/ids';
 
 const GpxImport: Component = () => {
   const onChangeHandler = (event: any) => {
-    console.log('On change handler');
-    const file: File = event.target.files[0];
-    const fileReader = new FileReader();
-    fileReader.readAsText(file);
+    console.log({
+      caller: 'GpxImport / On change handler',
+      files: event.target.files,
+    });
+    for (const file of event.target.files) {
+      const fileReader = new FileReader();
+      fileReader.readAsText(file);
 
-    fileReader.addEventListener(
-      'load',
-      () => {
-        // this will then display a text file
-        console.log({ caller: 'GpxImport / XML', result: fileReader.result });
-        const gpx = GPX.parse(fileReader.result);
-        console.log({ caller: 'GpxImport / JSON', gpx });
-        if (gpx) {
-          const startTime = new Date(findStartTime(gpx)!);
-          dispatch({
-            action: 'pruneAndSaveImportedGpx',
-            params: {
-              id: { gpx: intToGpxId(startTime.valueOf()) },
-              gpx: gpx,
-              tech: {
-                lastModified: new Date(file.lastModified).toISOString(),
-                importDate: new Date().toISOString(),
-                name: file.name,
-                size: file.size,
-                type: file.type,
+      fileReader.addEventListener(
+        'load',
+        async () => {
+          // this will then display a text file
+          console.log({
+            caller: 'GpxImport / XML',
+            file,
+            result: fileReader.result,
+          });
+          const gpx = GPX.parse(fileReader.result);
+          console.log({ caller: 'GpxImport / JSON', file, gpx });
+          if (gpx) {
+            const startTime = new Date(findStartTime(gpx)!);
+            await dispatch({
+              action: 'pruneAndSaveImportedGpx',
+              params: {
+                id: { gpx: intToGpxId(startTime.valueOf()) },
+                gpx: gpx,
+                tech: {
+                  lastModified: new Date(file.lastModified).toISOString(),
+                  importDate: new Date().toISOString(),
+                  name: file.name,
+                  size: file.size,
+                  type: file.type,
+                },
               },
-            },
-          });
-        } else {
-          console.error({
-            message: "can't parse GPX file",
-            xml: fileReader.result,
-          });
-        }
-        // TODO: error handling
-      },
-      false
-    );
+            });
+            console.log({ caller: 'GpxImport / JSON / done', file, gpx });
+          } else {
+            console.error({
+              message: "can't parse GPX file",
+              file,
+              xml: fileReader.result,
+            });
+          }
+          // TODO: error handling
+        },
+        false
+      );
+    }
   };
 
   return (
@@ -63,6 +73,7 @@ const GpxImport: Component = () => {
           id='gpx-import'
           class={css.inputFile}
           accept='.gpx'
+          multiple={true}
           onChange={onChangeHandler}
         />
       </div>