Displaying thumbnails

src/components/import/ImportSingleFile.tsx

@@ -30,6 +30,13 @@ interface StatsAndGpx {
   stats: any;
 }
 
+interface Picture {
+  id: string;
+  date: string;
+  gpx: { Latitude: number; Longitude: number; Altitude: number };
+  thumbnailUrl: string;
+}
+
 const analyzeGpx = (gpx: Gpx | undefined) => {
   if (gpx === undefined) {
     return {};
@@ -54,6 +61,7 @@ const analyzeGpx = (gpx: Gpx | undefined) => {
 const ImportSingleFile: Component<Props> = ({ file: file }) => {
   const [t] = useI18n();
   const [statsAndGpx, setStatsAndGpx] = createSignal<StatsAndGpx>();
+  const [picture, setPicture] = createSignal<Picture>();
   const [state, setState] = createSignal('init');
   const [gpxId, setGpxId] = createSignal<string>('');
   createEffect(() => {
@@ -102,7 +110,7 @@ const ImportSingleFile: Component<Props> = ({ file: file }) => {
           const id = exif?.ImageUniqueID?.value[0];
           const gps = tags.gps;
           const thumbnail = tags.Thumbnail;
-          const thumbnailSrc = `data:${thumbnail?.type};base64,${thumbnail?.base64}`;
+          const thumbnailUrl = `data:${thumbnail?.type};base64,${thumbnail?.base64}`;
           console.log({
             caller: 'ImportSingleFile / Jpeg',
             file,
@@ -112,9 +120,9 @@ const ImportSingleFile: Component<Props> = ({ file: file }) => {
             date,
             id,
             gps,
-            thumbnailSrc,
+            thumbnailUrl,
           });
-          //parseGpx(reader.result);
+          setPicture({ id, gps, thumbnailUrl, date });
         },
         false
       );
@@ -237,6 +245,18 @@ const ImportSingleFile: Component<Props> = ({ file: file }) => {
             </Button>
           </CardActions>
         </Show>
+        <Show when={picture() !== undefined}>
+          <img src={picture()?.thumbnailUrl} />
+          <CardActions>
+            <Button
+              variant='contained'
+              disabled={state() != 'init'}
+              onClick={doImport}
+            >
+              {t('import')}
+            </Button>
+          </CardActions>
+        </Show>
       </CardContent>
     </Card>
   );