Allow selecting webp images

src/components/sprite-selector/sprite-selector.jsx

@@ -120,7 +120,7 @@ const SpriteSelectorComponent = function (props) {
                         title: intl.formatMessage(messages.addSpriteFromFile),
                         img: fileUploadIcon,
                         onClick: onFileUploadClick,
-                        fileAccept: '.svg, .png, .bmp, .jpg, .jpeg, .jfif, .sprite2, .sprite3, .gif',
+                        fileAccept: '.svg, .png, .bmp, .jpg, .jpeg, .jfif, .webp, .sprite2, .sprite3, .gif',
                         fileChange: onSpriteUpload,
                         fileInput: spriteFileInput,
                         fileMultiple: true

src/components/stage-selector/stage-selector.jsx

@@ -102,7 +102,7 @@ const StageSelector = props => {
                         title: intl.formatMessage(messages.addBackdropFromFile),
                         img: fileUploadIcon,
                         onClick: onBackdropFileUploadClick,
-                        fileAccept: '.svg, .png, .bmp, .jpg, .jpeg, .jfif, .gif',
+                        fileAccept: '.svg, .png, .bmp, .jpg, .jpeg, .jfif, .webp, .gif',
                         fileChange: onBackdropFileUpload,
                         fileInput: fileInputRef,
                         fileMultiple: true

src/containers/costume-tab.jsx

@@ -283,7 +283,7 @@ class CostumeTab extends React.Component {
                         title: intl.formatMessage(addFileMessage),
                         img: fileUploadIcon,
                         onClick: this.handleFileUploadClick,
-                        fileAccept: '.svg, .png, .bmp, .jpg, .jpeg, .jfif, .gif',
+                        fileAccept: '.svg, .png, .bmp, .jpg, .jpeg, .jfif, .webp, .gif',
                         fileChange: this.handleCostumeUpload,
                         fileInput: this.setFileInput,
                         fileMultiple: true

src/lib/bmp-converter.js

@@ -1,10 +1,10 @@
-export default bmpImage => new Promise(resolve => {
+export default (bmpImage, type = 'image/bmp') => new Promise(resolve => {
     // If the input is an ArrayBuffer, we need to convert it to a `Blob` and give it a URL so we can use it as an <img>
     // `src`. If it's a data URI, we can use it as-is.
     const imageUrl = bmpImage instanceof String ?
         bmpImage :
-        window.URL.createObjectURL(new Blob([bmpImage], {type: 'image/bmp'}));
-    
+        window.URL.createObjectURL(new Blob([bmpImage], {type}));
+
     const canvas = document.createElement('canvas');
     const ctx = canvas.getContext('2d');
 
@@ -16,7 +16,7 @@ export default bmpImage => new Promise(resolve => {
         ctx.drawImage(image, 0, 0);
 
         const dataUrl = canvas.toDataURL('image/png');
-    
+
         // Revoke URL. If a blob URL was generated earlier, this allows the blob to be GC'd and prevents a memory leak.
         window.URL.revokeObjectURL(imageUrl);
 

src/lib/file-uploader.js

@@ -127,6 +127,14 @@ const costumeUpload = function (fileData, fileType, storage, handleCostume, hand
         assetType = storage.AssetType.ImageBitmap;
         break;
     }
+    case 'image/webp': {
+        // Scratch does not natively support webp, so convert to png
+        // see image/bmp logic above
+        bmpConverter(fileData, 'image/webp').then(dataUrl => {
+            costumeUpload(dataUrl, 'image/png', storage, handleCostume);
+        });
+        return;
+    }
     case 'image/gif': {
         let costumes = [];
         gifDecoder(fileData, (frameNumber, dataUrl, numFrames) => {
@@ -222,6 +230,7 @@ const spriteUpload = function (fileData, fileType, spriteName, storage, handleSp
     case 'image/png':
     case 'image/bmp':
     case 'image/jpeg':
+    case 'image/webp':
     case 'image/gif': {
         // Make a sprite from an image by making it a costume first
         costumeUpload(fileData, fileType, storage, vmCostumes => {