Improve mime type handling using magic byes

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>

src/components/floatingActionButton.tsx

@@ -9,14 +9,9 @@ import {
   useKeyboard,
 } from '@react-native-community/hooks';
 import Clipboard from '@react-native-clipboard/clipboard';
-import { documentPickerResponseToAddMemeFile, ROUTE } from '../types';
-import {
-  allowedMimeTypes,
-  getFilenameFromUri,
-  guessMimeType,
-  noOp,
-} from '../utilities';
 import { useDispatch } from 'react-redux';
+import { documentPickerResponseToAddMemeFile, ROUTE } from '../types';
+import { allowedMimeTypes, getFilenameFromUri, noOp } from '../utilities';
 import { setSnackbarMessage } from '../state';
 
 const floatingActionButtonStyles = StyleSheet.create({
@@ -59,17 +54,11 @@ const FloatingActionButton = ({ visible = true }: { visible?: boolean }) => {
       dispatch(setSnackbarMessage('Clipboard does not contain a URI.'));
       return;
     }
-    const mimeType = guessMimeType(uri);
-    if (!mimeType) {
-      dispatch(setSnackbarMessage('Unsupported MIME type.'));
-      return;
-    }
     navigate(ROUTE.ADD_MEME, {
       files: [
         {
           uri: uri,
           filename: getFilenameFromUri(uri),
-          type: mimeType,
         },
       ],
     });

src/components/memes/memeEditor.tsx

@@ -1,11 +1,11 @@
-import React, { useEffect } from 'react';
+import React, { useState } from 'react';
 import { HelperText, Text, TextInput, useTheme } from 'react-native-paper';
 import { Image } from 'react-native';
 import { useSafeAreaFrame } from 'react-native-safe-area-context';
-import { useImageDimensions } from '@react-native-community/hooks/lib/useImageDimensions';
-import { MemeFail, MemeTagSelector, LoadingView } from '..';
+import { MemeFail, MemeTagSelector } from '..';
 import { Tag } from '../../database';
 import { StringValidationResult, validateMemeTitle } from '../../utilities';
+import { Dimensions } from '../../types';
 
 const memeEditorStyles = {
   image: {
@@ -46,10 +46,7 @@ const MemeEditor = ({
   const { width } = useSafeAreaFrame();
   const { colors } = useTheme();
 
-  const { dimensions, loading, error } = useImageDimensions({ uri: memeUri });
-  useEffect(() => setMemeError(error), [error, setMemeError]);
-
-  if (!memeError && (loading || !dimensions)) return <LoadingView />;
+  const [dimensions, setDimensions] = useState<Dimensions>();
 
   return (
     <>
@@ -64,7 +61,7 @@ const MemeEditor = ({
       <HelperText type="error" visible={!memeTitle.valid}>
         {memeTitle.error}
       </HelperText>
-      {memeError || !dimensions ? (
+      {memeError ? (
         <MemeFail
           style={[
             {
@@ -79,19 +76,31 @@ const MemeEditor = ({
         <Image
           source={{ uri: memeUri }}
           style={[
-            {
-              width: width * 0.92,
-              height: Math.max(
-                Math.min(
-                  ((width * 0.92) / dimensions.width) * dimensions.height,
-                  500,
-                ),
-                100,
-              ),
-            },
+            dimensions
+              ? {
+                  width: width * 0.92,
+                  height: Math.max(
+                    Math.min(
+                      ((width * 0.92) / dimensions.width) * dimensions.height,
+                      500,
+                    ),
+                    100,
+                  ),
+                }
+              : {
+                  width: width * 0.92,
+                  height: width * 0.92,
+                },
             memeEditorStyles.image,
           ]}
           resizeMode="contain"
+          onLoad={event => {
+            setDimensions({
+              width: event.nativeEvent.source.width,
+              height: event.nativeEvent.source.height,
+            });
+          }}
+          onError={event => setMemeError(event.nativeEvent.error as Error)}
         />
       )}
       <Text

src/database/meme.ts

@@ -20,7 +20,7 @@ const memeTypePlural = {
 // eslint-disable-next-line @typescript-eslint/naming-convention
 class Meme extends Object<Meme> {
   id!: BSON.UUID;
-  type!: MEME_TYPE;
+  memeType!: MEME_TYPE;
   filename!: string;
   mimeType!: string;
   size!: number;
@@ -38,7 +38,7 @@ class Meme extends Object<Meme> {
     primaryKey: 'id',
     properties: {
       id: { type: 'uuid', default: () => new BSON.UUID() },
-      type: { type: 'string', indexed: true },
+      memeType: { type: 'string', indexed: true },
       filename: 'string',
       mimeType: 'string',
       size: 'int',

src/screens/editors/addMeme.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { Appbar, Banner, Button, useTheme } from 'react-native-paper';
 import { useNavigation } from '@react-navigation/native';
 import { ScrollView, View } from 'react-native';
@@ -19,7 +19,8 @@ import { Meme, Tag } from '../../database';
 import { RootState } from '../../state';
 import {
   allowedMimeTypes,
-  getMemeType,
+  getMemeTypeFromMimeType,
+  guessMimeType,
   validateMemeTitle,
 } from '../../utilities';
 import { MemeEditor } from '../../components';
@@ -42,25 +43,46 @@ const AddMeme = ({
   const file = useRef(files.current[index]);
   const isLastFile = index === files.current.length - 1;
 
-  const [memeUri, setMemeUri] = useState(file.current.uri);
-  const [memeFilename, setMemeFilename] = useState(file.current.filename);
+  const [memeLoading, setMemeLoading] = useState(true);
   const [memeError, setMemeError] = useState<Error>();
-  const [memeTitle, setMemeTitle] = useState(validateMemeTitle('New Meme'));
-  const [memeIsFavorite, setMemeIsFavorite] = useState(false);
-  const [memeTags, setMemeTags] = useState(new Map<string, Tag>());
 
   const [isSaving, setIsSaving] = useState(false);
   const [isSavingAndAddingMore, setIsSavingAndAddingMore] = useState(false);
 
-  const saveMeme = useCallback(async () => {
-    const uuid = new BSON.UUID();
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const mimeType = file.current.type!;
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const memeType = getMemeType(mimeType)!;
+  const [memeUri, setMemeUri] = useState(file.current.uri);
+  const [memeFilename, setMemeFilename] = useState(file.current.filename);
+  const [memeMimeType, setMemeMimeType] = useState<string>();
+  const [memeTitle, setMemeTitle] = useState(validateMemeTitle('New Meme'));
+  const [memeIsFavorite, setMemeIsFavorite] = useState(false);
+  const [memeTags, setMemeTags] = useState(new Map<string, Tag>());
 
-    const fileExtension = extension(mimeType) as string;
-    if (!fileExtension) goBack();
+  useEffect(() => {
+    const loadMeme = async () => {
+      const mimeType = await guessMimeType(file.current.uri);
+      if (!mimeType) {
+        setMemeError(
+          new Error('Could not determine MIME type or file is not supported.'),
+        );
+        return;
+      }
+
+      setMemeMimeType(mimeType);
+    };
+
+    setMemeLoading(true);
+    void loadMeme();
+    setMemeLoading(false);
+  }, [file]);
+
+  const saveMeme = useCallback(async () => {
+    if (!memeMimeType) return;
+    const uuid = new BSON.UUID();
+
+    const memeType = getMemeTypeFromMimeType(memeMimeType);
+    if (!memeType) return;
+
+    const fileExtension = extension(memeMimeType);
+    if (!fileExtension) return;
 
     const filename = `${uuid.toHexString()}-${Math.round(
       Date.now() / 1000,
@@ -73,9 +95,9 @@ const AddMeme = ({
     realm.write(() => {
       const meme: Meme | undefined = realm.create<Meme>(Meme.schema.name, {
         id: uuid,
-        type: memeType,
+        memeType,
         filename,
-        mimeType,
+        mimeType: memeMimeType,
         size,
         title: memeTitle.parsed,
         isFavorite: memeIsFavorite,
@@ -89,7 +111,14 @@ const AddMeme = ({
         tag.memesLength = tag.memes.length;
       });
     });
-  }, [goBack, memeIsFavorite, memeTags, memeTitle.parsed, realm, storageUri]);
+  }, [
+    memeIsFavorite,
+    memeMimeType,
+    memeTags,
+    memeTitle.parsed,
+    realm,
+    storageUri,
+  ]);
 
   const handleSave = useCallback(async () => {
     setIsSaving(true);
@@ -97,6 +126,14 @@ const AddMeme = ({
     goBack();
   }, [goBack, saveMeme]);
 
+  const resetState = useCallback(() => {
+    setMemeUri(file.current.uri);
+    setMemeFilename(file.current.filename);
+    setMemeTitle(validateMemeTitle('New Meme'));
+    setMemeIsFavorite(false);
+    setMemeTags(new Map<string, Tag>());
+  }, []);
+
   const handleSaveAndNext = useCallback(async () => {
     setIsSaving(true);
     await saveMeme();
@@ -105,12 +142,8 @@ const AddMeme = ({
     setIndex(index + 1);
     file.current = files.current[index + 1];
 
-    setMemeUri(file.current.uri);
-    setMemeFilename(file.current.filename);
-    setMemeTitle(validateMemeTitle('New Meme'));
-    setMemeIsFavorite(false);
-    setMemeTags(new Map<string, Tag>());
-  }, [index, saveMeme]);
+    resetState();
+  }, [index, resetState, saveMeme]);
 
   const handleSaveAndAddMore = useCallback(async () => {
     setIsSavingAndAddingMore(true);
@@ -126,12 +159,8 @@ const AddMeme = ({
     files.current = documentPickerResponseToAddMemeFile(response);
     file.current = files.current[0];
 
-    setMemeUri(file.current.uri);
-    setMemeFilename(file.current.filename);
-    setMemeTitle(validateMemeTitle('New Meme'));
-    setMemeIsFavorite(false);
-    setMemeTags(new Map<string, Tag>());
-  }, [goBack, saveMeme]);
+    resetState();
+  }, [goBack, resetState, saveMeme]);
 
   return (
     <>
@@ -180,10 +209,11 @@ const AddMeme = ({
             icon="plus"
             onPress={handleSaveAndAddMore}
             disabled={
-              !memeTitle.valid ||
+              memeLoading ||
+              !!memeError ||
               isSaving ||
               isSavingAndAddingMore ||
-              !!memeError ||
+              !memeTitle.valid ||
               !isLastFile
             }
             loading={isSavingAndAddingMore}
@@ -195,10 +225,11 @@ const AddMeme = ({
             icon="floppy"
             onPress={isLastFile ? handleSave : handleSaveAndNext}
             disabled={
-              !memeTitle.valid ||
+              memeLoading ||
+              !!memeError ||
               isSaving ||
               isSavingAndAddingMore ||
-              !!memeError
+              !memeTitle.valid
             }
             loading={isSaving}
             style={editorStyles.saveButton}>

src/screens/editors/editMeme.tsx

@@ -17,7 +17,8 @@ import {
   allowedMimeTypes,
   deleteMeme,
   favoriteMeme,
-  getMemeType,
+  getMemeTypeFromMimeType,
+  guessMimeType,
   noOp,
   validateMemeTitle,
 } from '../../utilities';
@@ -47,6 +48,7 @@ const EditMeme = ({
   const [hasChanges, setHasChanges] = useState(false);
 
   const [memeError, setMemeError] = useState<Error>();
+
   const [memeTitle, setMemeTitle] = useState(validateMemeTitle(meme.title));
   const [memeTags, setMemeTags] = useState(
     new Map<string, Tag>(meme.tags.map(tag => [tag.id.toHexString(), tag])),
@@ -104,10 +106,16 @@ const EditMeme = ({
     const file = await pickSingle({ type: allowedMimeTypes }).catch(noOp);
     if (!file) return;
 
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const mimeType = file.type!;
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const memeType = getMemeType(mimeType)!;
+    const mimeType = await guessMimeType(file.uri, file.type);
+    if (!mimeType) {
+      setMemeError(
+        new Error('Could not determine MIME type or file is not supported.'),
+      );
+      return;
+    }
+
+    const memeType = getMemeTypeFromMimeType(mimeType);
+    if (!memeType) return;
 
     const fileExtension = extension(mimeType) as string;
     if (!fileExtension) return;
@@ -122,7 +130,7 @@ const EditMeme = ({
 
     realm.write(() => {
       meme.filename = filename;
-      meme.type = memeType;
+      meme.memeType = memeType;
       meme.mimeType = mimeType;
       meme.size = size;
     });

src/screens/memes.tsx

@@ -80,7 +80,7 @@ const Memes = () => {
         .join(' OR ');
 
       if (favoritesOnly) collection = collection.filtered('isFavorite == true');
-      if (filter) collection = collection.filtered('type == $0', filter);
+      if (filter) collection = collection.filtered('memeType == $0', filter);
       if (tags && tagsQuery) {
         collection = collection.filtered(tagsQuery, ...tags);
       }

src/types/route.ts

@@ -1,5 +1,5 @@
 import { DocumentPickerResponse } from 'react-native-document-picker';
-import { getFilenameFromUri, guessMimeType } from '../utilities';
+import { getFilenameFromUri } from '../utilities';
 import { SharedItem } from './share';
 
 enum ROUTE {
@@ -34,7 +34,7 @@ const documentPickerResponseToAddMemeFile = (
     return {
       uri,
       filename: name ?? getFilenameFromUri(uri),
-      type: type ?? guessMimeType(uri),
+      type: type ?? undefined,
     };
   });
 };
@@ -55,7 +55,7 @@ const sharedItemToAddMemeFile = (item: SharedItem): AddMemeFile[] => {
   return data.map(uri => ({
     uri,
     filename: getFilenameFromUri(uri),
-    type: guessMimeType(uri),
+    type: mimeType,
   }));
 };
 

src/utilities/filesystem.ts

@@ -1,3 +1,5 @@
+import { FileSystem } from 'react-native-file-access';
+import filetypemime from 'magic-bytes.js';
 import { MEME_TYPE } from '../database';
 
 const allowedImageMimeTypes = [
@@ -12,7 +14,7 @@ const allowedGifMimeTypes = ['image/gif'];
 
 const allowedMimeTypes = [...allowedImageMimeTypes, ...allowedGifMimeTypes];
 
-const getMemeType = (mimeType: string): MEME_TYPE | undefined => {
+const getMemeTypeFromMimeType = (mimeType: string): MEME_TYPE | undefined => {
   switch (mimeType) {
     case 'image/bmp':
     case 'image/jpg':
@@ -27,7 +29,7 @@ const getMemeType = (mimeType: string): MEME_TYPE | undefined => {
   }
 };
 
-const guessMimeType = (filename: string): string | undefined => {
+const guessMimeTypeFromExtension = (filename: string): string | undefined => {
   const extension = filename.split('.').pop()?.toLowerCase();
   switch (extension) {
     case 'bmp': {
@@ -49,10 +51,34 @@ const guessMimeType = (filename: string): string | undefined => {
   }
 };
 
+const guessMimeTypeFromMagicBytes = async (
+  uri: string,
+): Promise<string | undefined> => {
+  const fileContent = await FileSystem.read(uri, 100);
+  const possibleMimeTypes = filetypemime(fileContent);
+  if (possibleMimeTypes.length === 0) return undefined;
+  return possibleMimeTypes[0].mime;
+};
+
+const guessMimeType = async (
+  uri: string,
+  hint?: string | null,
+): Promise<string | undefined> => {
+  if (hint) {
+    if (allowedMimeTypes.includes(hint)) return hint;
+    if (!hint.startsWith('image/')) return undefined;
+  }
+
+  const guessedMimeType = guessMimeTypeFromExtension(uri);
+  if (guessedMimeType) return guessedMimeType;
+
+  return await guessMimeTypeFromMagicBytes(uri);
+};
+
 export {
   allowedImageMimeTypes,
   allowedGifMimeTypes,
   allowedMimeTypes,
-  getMemeType,
+  getMemeTypeFromMimeType,
   guessMimeType,
 };

src/utilities/index.ts

@@ -14,7 +14,7 @@ export {
   allowedImageMimeTypes,
   allowedGifMimeTypes,
   allowedMimeTypes,
-  getMemeType,
+  getMemeTypeFromMimeType,
   guessMimeType,
 } from './filesystem';
 export { getSortIcon, getViewIcon } from './icon';