Merge pull request #1548 from GetStream/khushal87-issue-1545

Author: santhoshvai

package/src/components/ImageGallery/ImageGallery.tsx

@@ -273,21 +273,25 @@ export const ImageGallery = <
 
     const attachmentPhotos = attachmentImages.map((a) => {
       const imageUrl = getUrlOfImageAttachment(a) as string;
+      const giphyURL = a.giphy?.[giphyVersion]?.url || a.thumb_url || a.image_url;
 
       return {
         channelId: cur.cid,
         created_at: cur.created_at,
         id: `photoId-${cur.id}-${imageUrl}`,
         messageId: cur.id,
-        mime_type: a.mime_type,
+        mime_type: a.type === 'giphy' ? 'image/gif' : a.mime_type,
         original_height: a.original_height,
         original_width: a.original_width,
         type: a.type,
-        uri: getResizedImageUrl({
-          height: screenHeight,
-          url: imageUrl,
-          width: screenWidth,
-        }),
+        uri:
+          a.type === 'giphy'
+            ? giphyURL
+            : getResizedImageUrl({
+                height: screenHeight,
+                url: imageUrl,
+                width: screenWidth,
+              }),
         user: cur.user,
         user_id: cur.user_id,
       };

package/src/components/ImageGallery/components/ImageGalleryFooter.tsx

@@ -171,7 +171,8 @@ export const ImageGalleryFooterWithContext = <
         }-${selectedIndex}.${extension}`,
         fromUrl: photo.uri,
       });
-      await shareImage({ type: photo.mime_type, url: localFile });
+      // `image/jpeg` is added for the case where the mime_type isn't available for a file/image
+      await shareImage({ type: photo.mime_type ?? 'image/jpeg', url: localFile });
       await deleteFile({ uri: localFile });
     } catch (error) {
       console.log(error);

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -669,10 +669,14 @@ export const MessageInputProvider = <
         }
       }
 
+      // To get the mime type of the image from the file name and send it as an response for an image
+      const mime_type: string | boolean = lookup(image.file.filename as string);
+
       if (image.state === FileState.UPLOADED || image.state === FileState.FINISHED) {
         attachments.push({
           fallback: image.file.name,
           image_url: image.url,
+          mime_type,
           original_height: image.height,
           original_width: image.width,
           type: 'image',
@@ -689,11 +693,14 @@ export const MessageInputProvider = <
         sending.current = false;
         return;
       }
+      const mime_type: string | boolean = lookup(file.file.name as string);
+
       if (file.state === FileState.UPLOADED || file.state === FileState.FINISHED) {
         if (file.file.type?.startsWith('image/')) {
           attachments.push({
             fallback: file.file.name,
             image_url: file.url,
+            mime_type,
             type: 'image',
           } as Attachment<StreamChatGenerics>);
         } else if (file.file.type?.startsWith('audio/')) {

package/src/contexts/messageInputContext/__tests__/__snapshots__/sendMessage.test.tsx.snap

@@ -6,6 +6,7 @@ Object {
     Object {
       "fallback": undefined,
       "image_url": undefined,
+      "mime_type": false,
       "original_height": undefined,
       "original_width": undefined,
       "type": "image",
@@ -65,6 +66,7 @@ Object {
     Object {
       "fallback": "dummy.pdf",
       "image_url": undefined,
+      "mime_type": "application/pdf",
       "type": "image",
     },
   ],
@@ -85,13 +87,15 @@ Object {
     Object {
       "fallback": undefined,
       "image_url": undefined,
+      "mime_type": false,
       "original_height": undefined,
       "original_width": undefined,
       "type": "image",
     },
     Object {
       "fallback": undefined,
       "image_url": undefined,
+      "mime_type": false,
       "original_height": undefined,
       "original_width": undefined,
       "type": "image",