Using piexifjs to support exif (it(s yhe only one that can write exif data) and nothing to reisze images (WIP)

src/components/import/ImportSingleFile.tsx

@@ -19,8 +19,7 @@ import {
   Filesystem as CapacitorFileSystem,
   Encoding,
 } from '@capacitor/filesystem';
-import ExifReader from 'exifreader';
-import { Image } from 'image-js';
+import piexif from 'piexifjs';
 
 interface Props {
   file: File;
@@ -101,40 +100,42 @@ const ImportSingleFile: Component<Props> = ({ file: file }) => {
   } else {
     const reader = new FileReader();
     if (file.type === 'image/jpeg') {
-      reader.readAsArrayBuffer(file);
+      reader.readAsDataURL(file);
       reader.addEventListener(
         'load',
         async () => {
-          const tags = ExifReader.load(reader.result, { expanded: true });
-          const exif = tags.exif;
-          const dateSegments = exif?.DateTimeOriginal?.value[0].split(' ');
+          const imageUrl = reader.result;
+          const exifObj = piexif.load(imageUrl);
+          const id = '';
+          const gps = {};
+          const dateSegments =
+            exifObj.Exif[piexif.ExifIFD.DateTimeOriginal].split(' ');
           const date = `${dateSegments[0].replaceAll(':', '-')}T${
             dateSegments[1]
-          }.${exif?.SubSecTimeOriginal?.value[0] || '0'}${
-            exif?.OffsetTimeOriginal?.value[0]
+          }.${exifObj.Exif[piexif.ExifIFD.SubSecTimeOriginal] || '0'}${
+            exifObj.Exif[piexif.ExifIFD.OffsetTimeOriginal]
           }`;
-          const id = exif?.ImageUniqueID?.value[0];
-          const gps = tags.gps;
-          const image = await Image.load(reader.result);
-          const thumbnail = image.resize({
-            width: 256,
-            interpolation: 'bilinear',
-          });
-          const thumbnailUrl = thumbnail.toDataURL();
-          // const thumbnail = tags.Thumbnail;
-          //const thumbnailUrl = `data:${thumbnail?.type};base64,${thumbnail?.base64}`;
+          // const id = exif?.ImageUniqueID?.value[0];
+          // const gps = tags.gps;
+          // const image = await Image.load(reader.result);
+          // const thumbnail = image.resize({
+          //   width: 256,
+          //   interpolation: 'bilinear',
+          // });
+          // const thumbnailUrl = thumbnail.toDataURL();
+          // // const thumbnail = tags.Thumbnail;
+          // //const thumbnailUrl = `data:${thumbnail?.type};base64,${thumbnail?.base64}`;
           console.log({
             caller: 'ImportSingleFile / Jpeg',
             file,
-            type: file.type,
-            result: reader.result,
-            tags,
-            date,
             id,
             gps,
-            thumbnailUrl,
+            date,
+            type: file.type,
+            result: reader.result,
+            exifObj,
           });
-          setPicture({ id, gps, thumbnailUrl, date });
+          setPicture({ id, gps, date, thumbnailUrl: imageUrl });
         },
         false
       );

src/missing-typedefs/piexifjs.d.ts

@@ -0,0 +1 @@
+declare module 'piexifjs';