Fix share extension ivalid file type by adding image/heic to SHARE_FILE_MIMETYPE

src/CONST/index.ts

@@ -1832,6 +1832,7 @@ const CONST = {
         MSWORD: 'application/msword',
         ZIP: 'application/zip',
         RFC822: 'message/rfc822',
+        HEIC: 'image/heic',
     },
 
     SHARE_FILE_MIMETYPE: {
@@ -1842,6 +1843,7 @@ const CONST = {
         WEBP: 'image/webp',
         TIF: 'image/tif',
         TIFF: 'image/tiff',
+        HEIC: 'image/heic',
         IMG: 'image/*',
         PDF: 'application/pdf',
         MSWORD: 'application/msword',

src/pages/Share/ShareDetailsPage.tsx

@@ -2,6 +2,7 @@ import type {StackScreenProps} from '@react-navigation/stack';
 import React, {useEffect, useMemo, useState} from 'react';
 import {SafeAreaView, View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
+import type {FileObject} from '@components/AttachmentModal';
 import AttachmentModal from '@components/AttachmentModal';
 import AttachmentPreview from '@components/AttachmentPreview';
 import Button from '@components/Button';
@@ -13,6 +14,7 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import ScrollView from '@components/ScrollView';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
+import useFilesValidation from '@hooks/useFilesValidation';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -53,9 +55,20 @@ function ShareDetailsPage({
     const [errorTitle, setErrorTitle] = useState<string | undefined>(undefined);
     const [errorMessage, setErrorMessage] = useState<string | undefined>(undefined);
 
+    const [validFilesToUpload, setValidFilesToUpload] = useState<FileObject[]>([]);
+    const {validateFiles} = useFilesValidation(setValidFilesToUpload);
+
     const report: OnyxEntry<ReportType> = getReportOrDraftReport(reportOrAccountID);
     const displayReport = useMemo(() => getReportDisplayOption(report, unknownUserDetails, reportAttributesDerived), [report, unknownUserDetails, reportAttributesDerived]);
 
+    useEffect(() => {
+        if (!currentAttachment || isTextShared || validFilesToUpload.length !== 0) {
+            return;
+        }
+
+        validateFiles([{name: currentAttachment.id, uri: currentAttachment.content, type: currentAttachment.mimeType}]);
+    }, [currentAttachment, isTextShared, validFilesToUpload.length, validateFiles]);
+
     useEffect(() => {
         if (!currentAttachment?.content || errorTitle) {
             return;
@@ -92,7 +105,7 @@ function ShareDetailsPage({
     const fileName = currentAttachment?.content.split('/').pop();
 
     const handleShare = () => {
-        if (!currentAttachment) {
+        if (!currentAttachment || validFilesToUpload.length === 0) {
             return;
         }
 
@@ -103,9 +116,10 @@ function ShareDetailsPage({
             return;
         }
 
+        const validatedFile = validFilesToUpload.at(0);
         readFileAsync(
-            currentAttachment.content,
-            getFileName(currentAttachment.content),
+            validatedFile?.uri ?? '',
+            getFileName(validatedFile?.uri ?? 'shared_image.png'),
             (file) => {
                 if (isDraft) {
                     openReport(
@@ -126,7 +140,7 @@ function ShareDetailsPage({
                 Navigation.navigate(routeToNavigate, {forceReplace: true});
             },
             () => {},
-            currentAttachment.mimeType,
+            validatedFile?.type ?? 'image/jpeg',
         );
     };
 
@@ -197,13 +211,13 @@ function ShareDetailsPage({
                                 <SafeAreaView>
                                     <AttachmentModal
                                         headerTitle={fileName}
-                                        source={currentAttachment?.content}
+                                        source={validFilesToUpload.at(0)?.uri}
                                         originalFileName={fileName}
                                         fallbackSource={FallbackAvatar}
                                     >
                                         {({show}) => (
                                             <AttachmentPreview
-                                                source={currentAttachment?.content ?? ''}
+                                                source={validFilesToUpload.at(0)?.uri ?? ''}
                                                 aspectRatio={currentAttachment?.aspectRatio}
                                                 onPress={show}
                                                 onLoadError={() => {

src/pages/Share/SubmitDetailsPage.tsx

@@ -2,12 +2,14 @@ import type {StackScreenProps} from '@react-navigation/stack';
 import React, {useEffect, useState} from 'react';
 import {View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
+import type {FileObject} from '@components/AttachmentModal';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import LocationPermissionModal from '@components/LocationPermissionModal';
 import MoneyRequestConfirmationList from '@components/MoneyRequestConfirmationList';
 import ScreenWrapper from '@components/ScreenWrapper';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
+import useFilesValidation from '@hooks/useFilesValidation';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -56,6 +58,17 @@ function SubmitDetailsPage({
     const [errorTitle, setErrorTitle] = useState<string | undefined>(undefined);
     const [errorMessage, setErrorMessage] = useState<string | undefined>(undefined);
 
+    const [validFilesToUpload, setValidFilesToUpload] = useState<FileObject[]>([]);
+    const {validateFiles} = useFilesValidation(setValidFilesToUpload);
+
+    useEffect(() => {
+        if (!currentAttachment || validFilesToUpload.length !== 0) {
+            return;
+        }
+
+        validateFiles([{name: currentAttachment.id, uri: currentAttachment.content, type: currentAttachment.mimeType}]);
+    }, [currentAttachment, validFilesToUpload.length, validateFiles]);
+
     useEffect(() => {
         if (!errorTitle || !errorMessage) {
             return;
@@ -184,12 +197,13 @@ function SubmitDetailsPage({
             return;
         }
 
+        const validatedFile = validFilesToUpload.at(0);
         readFileAsync(
-            currentAttachment?.content ?? '',
-            getFileName(currentAttachment?.content ?? 'shared_image.png'),
+            validatedFile?.uri ?? '',
+            getFileName(validatedFile?.name ?? 'shared_image.png'),
             (file) => onSuccess(file, shouldStartLocationPermissionFlow),
             () => {},
-            currentAttachment?.mimeType ?? 'image/jpeg',
+            validatedFile?.type ?? 'image/jpeg',
         );
     };
 
@@ -220,8 +234,8 @@ function SubmitDetailsPage({
                         iouComment={trimmedComment}
                         iouCategory={transaction?.category}
                         onConfirm={() => onConfirm(true)}
-                        receiptPath={currentAttachment?.content}
-                        receiptFilename={getFileName(currentAttachment?.content ?? '')}
+                        receiptPath={validFilesToUpload.at(0)?.uri}
+                        receiptFilename={getFileName(validFilesToUpload.at(0)?.name ?? '')}
                         reportID={reportOrAccountID}
                         shouldShowSmartScanFields={false}
                         isDistanceRequest={false}