[MM-14699] Update image cache manager to handle correct file extensions (#2701)

* Update image cache manager to handle correct file extensions

* Use RNFetchBlob.fs.existsWithDiffExt to find cached images with
  extensions other than the default .png

* Add package-lock.json

* Use app/util/file's getExtensionFromMime

* Define DEFAULT_MIME_TYPE in image_cache_manager.js

app/utils/image_cache_manager.js

@@ -9,9 +9,11 @@ import RNFetchBlob from 'rn-fetch-blob';
 import {Client4} from 'mattermost-redux/client';
 
 import {DeviceTypes} from 'app/constants';
+import {getExtensionFromMime} from 'app/utils/file';
 import mattermostBucket from 'app/mattermost_bucket';
 
 const {IMAGES_PATH} = DeviceTypes;
+const DEFAULT_MIME_TYPE = 'image/png';
 let siteUrl;
 
 export default class ImageCacheManager {
@@ -53,7 +55,17 @@ export default class ImageCacheManager {
                         throw new Error();
                     }
 
-                    notifyAll(uri, `${prefix}${path}`);
+                    const mimeType = this.downloadTask.respInfo.headers['Content-Type'];
+                    const ext = `.${getExtensionFromMime(mimeType) || getExtensionFromMime(DEFAULT_MIME_TYPE)}`;
+                    if (path.endsWith(ext)) {
+                        notifyAll(uri, `${prefix}${path}`);
+                    } else {
+                        const oldExt = path.substring(path.lastIndexOf('.'));
+                        const newPath = path.replace(oldExt, ext);
+                        await RNFetchBlob.fs.mv(path, newPath);
+
+                        notifyAll(uri, `${prefix}${newPath}`);
+                    }
                 } catch (e) {
                     RNFetchBlob.fs.unlink(`${prefix}${path}`);
                     notifyAll(uri, uri);
@@ -70,8 +82,9 @@ export default class ImageCacheManager {
 
 export const getCacheFile = async (name, uri) => {
     const filename = name || uri.substring(uri.lastIndexOf('/'), uri.indexOf('?') === -1 ? uri.length : uri.indexOf('?'));
-    const ext = filename.indexOf('.') === -1 ? '.png' : filename.substring(filename.lastIndexOf('.'));
-    const path = `${IMAGES_PATH}/${Math.abs(hashCode(uri))}${ext}`;
+    const defaultExt = `.${getExtensionFromMime(DEFAULT_MIME_TYPE)}`;
+    const ext = filename.indexOf('.') === -1 ? defaultExt : filename.substring(filename.lastIndexOf('.'));
+    let path = `${IMAGES_PATH}/${Math.abs(hashCode(uri))}${ext}`;
 
     try {
         const isDir = await RNFetchBlob.fs.isDir(IMAGES_PATH);
@@ -82,7 +95,15 @@ export const getCacheFile = async (name, uri) => {
         // do nothing
     }
 
-    const exists = await RNFetchBlob.fs.exists(path);
+    let exists = await RNFetchBlob.fs.exists(path);
+    if (!exists) {
+        const pathWithDiffExt = await RNFetchBlob.fs.existsWithDiffExt(path);
+        if (pathWithDiffExt) {
+            exists = true;
+            path = pathWithDiffExt;
+        }
+    }
+
     return {exists, path};
 };
 

package-lock.json

@@ -9684,7 +9684,11 @@
     },
     "mkdirp": {
       "version": "0.5.1",
+<<<<<<< HEAD
       "resolved": "http://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
+=======
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
+>>>>>>> 1a9b34f6... [MM-14699] Update image cache manager to handle correct file extensions (#2701)
       "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
       "requires": {
         "minimist": "0.0.8"
@@ -9692,7 +9696,11 @@
       "dependencies": {
         "minimist": {
           "version": "0.0.8",
+<<<<<<< HEAD
           "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
+=======
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
+>>>>>>> 1a9b34f6... [MM-14699] Update image cache manager to handle correct file extensions (#2701)
           "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
         }
       }
@@ -13188,8 +13196,8 @@
       }
     },
     "rn-fetch-blob": {
-      "version": "github:mattermost/react-native-fetch-blob#5b19784992ef2a1fa00c3a4c71fb005d7789b05c",
-      "from": "github:mattermost/react-native-fetch-blob#5b19784992ef2a1fa00c3a4c71fb005d7789b05c",
+      "version": "github:mattermost/react-native-fetch-blob#1800697e2e3834e80f7e5fa84edb5aa43c161bbc",
+      "from": "github:mattermost/react-native-fetch-blob#1800697e2e3834e80f7e5fa84edb5aa43c161bbc",
       "requires": {
         "base-64": "0.1.0",
         "glob": "7.0.6"

package.json

@@ -65,7 +65,7 @@
     "redux-persist-transform-filter": "0.0.18",
     "redux-thunk": "2.3.0",
     "reselect": "4.0.0",
-    "rn-fetch-blob": "github:mattermost/react-native-fetch-blob#5b19784992ef2a1fa00c3a4c71fb005d7789b05c",
+    "rn-fetch-blob": "github:mattermost/react-native-fetch-blob#1800697e2e3834e80f7e5fa84edb5aa43c161bbc",
     "rn-placeholder": "github:mattermost/rn-placeholder#bfee66eb54f1f06d1425a0ad511a5e16559bf82c",
     "semver": "5.6.0",
     "shallow-equals": "1.0.0",