Improve mime type handling using magic byes

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

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,
 };