fix: camera roll issues

Author: isekovanic

package/native-package/src/optionalDependencies/getLocalAssetUri.ts

@@ -1,3 +1,5 @@
+import { Platform } from 'react-native';
+
 let CameraRollDependency;
 
 try {
@@ -12,7 +14,11 @@ try {
 export const getLocalAssetUri = CameraRollDependency
   ? async (remoteUri: string) => {
       try {
-        const localUri = await CameraRollDependency.CameraRoll.save(remoteUri);
+        let localUri = remoteUri;
+        if (Platform.OS === 'ios') {
+          const imageData = await CameraRollDependency.CameraRoll.iosGetImageDataById(remoteUri);
+          localUri = imageData?.node?.image?.filepath;
+        }
         return localUri;
       } catch {
         throw new Error('getLocalAssetUri Error');

package/src/components/AttachmentPicker/AttachmentPicker.tsx

@@ -237,9 +237,13 @@ export const AttachmentPicker = React.forwardRef(
       // `id` is available for Expo MediaLibrary while Cameraroll doesn't share id therefore we use `uri`
       selected:
         selectedImages.some((image) =>
-          image.id ? image.id === asset.id : image.uri === asset.uri,
+          image.id
+            ? image.id === asset.id
+            : image.uri === asset.uri || image.originalUri === asset.uri,
         ) ||
-        selectedFiles.some((file) => (file.id ? file.id === asset.id : file.uri === asset.uri)),
+        selectedFiles.some((file) =>
+          file.id ? file.id === asset.id : file.uri === asset.uri || file.originalUri === asset.uri,
+        ),
       selectedFiles,
       selectedImages,
       setSelectedFiles,

package/src/components/AttachmentPicker/components/AttachmentPickerItem.tsx

@@ -58,8 +58,12 @@ const AttachmentVideo = (props: AttachmentVideoProps) => {
   /* Patches video files with uri and mimetype */
   const patchVideoFile = async (files: File[]) => {
     // For the case of Expo CLI where you need to fetch the file uri from file id. Here it is only done for iOS since for android the file.uri is fine.
+    const identifier = asset.id || asset.uri;
     const localAssetURI =
-      Platform.OS === 'ios' && asset.id && getLocalAssetUri && (await getLocalAssetUri(asset.id));
+      Platform.OS === 'ios' &&
+      identifier &&
+      getLocalAssetUri &&
+      (await getLocalAssetUri(identifier));
     const uri = localAssetURI || asset.uri || '';
     // We need a mime-type to upload a video file.
     const mimeType = lookup(asset.name) || 'multipart/form-data';
@@ -70,6 +74,7 @@ const AttachmentVideo = (props: AttachmentVideoProps) => {
         id: asset.id,
         mimeType,
         name: asset.name,
+        originalUri: asset.uri,
         size: asset.size,
         uri,
       },
@@ -89,7 +94,9 @@ const AttachmentVideo = (props: AttachmentVideoProps) => {
     if (selected) {
       setSelectedFiles((files) =>
         // `id` is available for Expo MediaLibrary while Cameraroll doesn't share id therefore we use `uri`
-        files.filter((file) => (file.id ? file.id !== asset.id : file.uri !== asset.uri)),
+        files.filter((file) =>
+          file.id ? file.id !== asset.id : file.uri !== asset.uri && file.originalUri !== asset.uri,
+        ),
       );
     } else {
       updateSelectedFiles();
@@ -154,13 +161,18 @@ const AttachmentImage = (props: AttachmentImageProps) => {
   /* Patches image files with uri */
   const patchImageFile = async (images: Asset[]) => {
     // For the case of Expo CLI where you need to fetch the file uri from file id. Here it is only done for iOS since for android the file.uri is fine.
+    const identifier = asset.id || asset.uri;
     const localAssetURI =
-      Platform.OS === 'ios' && asset.id && getLocalAssetUri && (await getLocalAssetUri(asset.id));
+      Platform.OS === 'ios' &&
+      identifier &&
+      getLocalAssetUri &&
+      (await getLocalAssetUri(identifier));
     const uri = localAssetURI || asset.uri || '';
     return [
       ...images,
       {
         ...asset,
+        originalUri: asset.uri,
         uri,
       },
     ];
@@ -179,7 +191,11 @@ const AttachmentImage = (props: AttachmentImageProps) => {
     if (selected) {
       // `id` is available for Expo MediaLibrary while Cameraroll doesn't share id therefore we use `uri`
       setSelectedImages((images) =>
-        images.filter((image) => (image.id ? image.id !== asset.id : image.uri !== asset.uri)),
+        images.filter((image) =>
+          image.id
+            ? image.id !== asset.id
+            : image.uri !== asset.uri && image.originalUri !== asset.uri,
+        ),
       );
     } else {
       updateSelectedImages();

package/src/types/types.ts

@@ -21,6 +21,7 @@ export type Asset = {
   uri: string;
   width: number;
   id?: string;
+  originalUri?: string;
   size?: number;
 };
 
@@ -29,6 +30,7 @@ export type File = {
   duration?: number;
   id?: string;
   mimeType?: string;
+  originalUri?: string;
   size?: number;
   type?: FileTypes;
   // The uri should be of type `string`. But is `string|undefined` because the same type is used for the response from Stream's Attachment. This shall be fixed.