MM-10617 Fixed checking if a link is an image (#1681)

* MM-10617 Fixed checking if a link is an image

* Added unit tests

app/utils/url.js

@@ -3,8 +3,9 @@
 
 import {latinise} from './latinise.js';
 
+import {Files} from 'mattermost-redux/constants';
+
 const ytRegex = /(?:http|https):\/\/(?:www\.|m\.)?(?:(?:youtube\.com\/(?:(?:v\/)|(?:(?:watch|embed\/watch)(?:\/|.*v=))|(?:embed\/)|(?:user\/[^/]+\/u\/[0-9]\/)))|(?:youtu\.be\/))([^#&?]*)/;
-const imgRegex = /.+\/(.+\.(?:jpg|gif|bmp|png|jpeg))(?:\?.*)?$/i;
 
 export function isValidUrl(url = '') {
     const regex = /^https?:\/\//i;
@@ -42,8 +43,20 @@ export function isYoutubeLink(link) {
 }
 
 export function isImageLink(link) {
-    const match = link.trim().match(imgRegex);
-    return Boolean(match && match[1]);
+    let linkWithoutQuery = link;
+    if (link.indexOf('?') !== -1) {
+        linkWithoutQuery = linkWithoutQuery.split('?')[0];
+    }
+
+    for (let i = 0; i < Files.IMAGE_TYPES.length; i++) {
+        const imageType = Files.IMAGE_TYPES[i];
+
+        if (linkWithoutQuery.endsWith('.' + imageType) || linkWithoutQuery.endsWith('=' + imageType)) {
+            return true;
+        }
+    }
+
+    return false;
 }
 
 // Converts the protocol of a link (eg. http, ftp) to be lower case since

app/utils/url.test.js

@@ -0,0 +1,45 @@
+// Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import * as UrlUtils from 'app/utils/url';
+
+/* eslint-disable max-nested-callbacks */
+
+describe('UrlUtils', () => {
+    describe('isImageLink', () => {
+        it('not an image link', () => {
+            const link = 'https://mattermost.com/index.html';
+            expect(UrlUtils.isImageLink(link)).toEqual(false);
+        });
+
+        it('a png link', () => {
+            const link = 'https://mattermost.com/image.png';
+            expect(UrlUtils.isImageLink(link)).toEqual(true);
+        });
+
+        it('a jpg link', () => {
+            const link = 'https://mattermost.com/assets/image.jpeg';
+            expect(UrlUtils.isImageLink(link)).toEqual(true);
+        });
+
+        it('a jpeg link', () => {
+            const link = 'https://mattermost.com/logo.jpeg';
+            expect(UrlUtils.isImageLink(link)).toEqual(true);
+        });
+
+        it('a bmp link', () => {
+            const link = 'https://images.mattermost.com/foo/bar/asdf.bmp';
+            expect(UrlUtils.isImageLink(link)).toEqual(true);
+        });
+
+        it('a gif link', () => {
+            const link = 'https://mattermost.com/jif.gif';
+            expect(UrlUtils.isImageLink(link)).toEqual(true);
+        });
+
+        it('a link with a query parameter', () => {
+            const link = 'https://mattermost.com/image.png?hash=foobar';
+            expect(UrlUtils.isImageLink(link)).toEqual(true);
+        });
+    });
+});