Add support for webp images

[skip-crystalball] closes LS-1734 flag=none test plan: - upload a webp image from the Files page > expect it to work like all other images > expect to be able to preview it - upload a webp image from the RCE's image upload dialog > expect it to get embedded in the RCE - open the course images tray > expect it to be there, with a thumbnail > expect to be able to adjust its size using the image options tray Change-Id: I621a3f5fc455bc3aaf19928a5cfa7931a1694277 Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/286027 Tested-by: Service Cloud Jenkins <[email protected]> Reviewed-by: Robin Kuss <[email protected]> QA-Review: Robin Kuss <[email protected]> Product-Review: Ed Schiebel <[email protected]>
instructure · Mar 8, 2022 · f79fc79 · f79fc79
1 parent 1ac5e78
commit f79fc79
Show file tree

Hide file tree

Showing 7 changed files with 10 additions and 6 deletions.
diff --git a/app/models/attachment.rb b/app/models/attachment.rb
@@ -1223,7 +1223,7 @@ def mime_class
       "image/gif" => "image",
       "image/bmp" => "image",
       "image/svg+xml" => "image",
-      # "image/webp" => "image", not supported by safari as of Version 13.1.1
+      "image/webp" => "image",
       "image/vnd.microsoft.icon" => "image",
       "application/x-rar" => "zip",
       "application/x-rar-compressed" => "zip",

diff --git a/gems/attachment_fu/lib/attachment_fu.rb b/gems/attachment_fu/lib/attachment_fu.rb
@@ -36,6 +36,7 @@ module AttachmentFu # :nodoc:
     "image/x-ms-bmp",
     "image/bmp",
     "image/x-bmp",
+    "image/webp",
     "image/x-bitmap",
     "image/x-xbitmap",
     "image/x-win-bitmap",

diff --git a/gems/canvas_mimetype_fu/lib/canvas_mimetype_fu/mime_types.yml b/gems/canvas_mimetype_fu/lib/canvas_mimetype_fu/mime_types.yml
@@ -720,6 +720,7 @@ wb3: application/x-quattropro
 wbmp: image/vnd.wap.wbmp
 wbs: application/vnd.criticaltools.wbs+xml
 wbxml: application/vnd.wap.wbxml
+webp: image/webp
 wif: application/watcherinfo+xml
 wk1: application/vnd.lotus-1-2-3
 wk3: application/vnd.lotus-1-2-3

diff --git a/gems/canvas_mimetype_fu/spec/canvas_mimetype_fu/mime_type_spec.rb b/gems/canvas_mimetype_fu/spec/canvas_mimetype_fu/mime_type_spec.rb
@@ -37,6 +37,8 @@
 
     expect(File.mime_types["application/x-kontour"]).to eq "kon"
     expect(File.mime_types["application/vnd.kde.kontour"]).to eq "kon"
+
+    expect(File.mime_types["image/webp"]).to eq "webp"
   end
 end
 

diff --git a/packages/canvas-rce/src/common/mimeClass.js b/packages/canvas-rce/src/common/mimeClass.js
@@ -62,7 +62,7 @@ export function mimeClass(file) {
         'image/gif': 'image',
         'image/bmp': 'image',
         'image/svg+xml': 'image',
-        // 'image/webp': 'image', not supported by safari as of Version 13.1.1
+        'image/webp': 'image',
         'application/x-rar': 'zip',
         'application/x-rar-compressed': 'zip',
         'application/x-zip': 'zip',

diff --git a/packages/canvas-rce/test/common/mimeClass.test.js b/packages/canvas-rce/test/common/mimeClass.test.js
@@ -72,15 +72,15 @@ describe('mimeClass', () => {
     assert.strictEqual(mimeClass({'content-type': 'audio/*'}), 'audio')
     assert.strictEqual(mimeClass({'content-type': 'audio'}), 'audio')
     assert.strictEqual(mimeClass({'content-type': 'image/svg+xml'}), 'image')
-    assert.strictEqual(mimeClass({'content-type': 'image/webp'}), 'file')
+    assert.strictEqual(mimeClass({'content-type': 'image/webp'}), 'image')
     assert.strictEqual(mimeClass({'content-type': 'application/vnd.ms-powerpoint'}), 'ppt')
   })
 
   it('returns value corresponding to provided `type`', () => {
     assert.strictEqual(mimeClass({type: 'video/mp4'}), 'video')
     assert.strictEqual(mimeClass({type: 'audio/webm'}), 'audio')
     assert.strictEqual(mimeClass({type: 'image/svg+xml'}), 'image')
-    assert.strictEqual(mimeClass({type: 'image/webp'}), 'file')
+    assert.strictEqual(mimeClass({type: 'image/webp'}), 'image')
     assert.strictEqual(mimeClass({type: 'application/vnd.ms-powerpoint'}), 'ppt')
   })
 })
diff --git a/ui/shared/mime/mimeClass.js b/ui/shared/mime/mimeClass.js
@@ -83,7 +83,7 @@ const mimeClasses = {
     get displayName() {
       return I18n.t('Image')
     },
-    mimeTypes: ['image/png', 'image/x-psd', 'image/gif', 'image/pjpeg', 'image/jpeg']
+    mimeTypes: ['image/png', 'image/x-psd', 'image/gif', 'image/pjpeg', 'image/jpeg', 'image/webp']
   },
   ppt: {
     get displayName() {
@@ -152,7 +152,7 @@ export default function mimeClass(contentType) {
   return mimeClass.mimeClasses[contentType] || 'file'
 }
 
-mimeClass.displayName = function(contentType) {
+mimeClass.displayName = function (contentType) {
   const found = mimeClasses[mimeClass(contentType)]
   return (found && found.displayName) || I18n.t('Unknown')
 }