Add bitmap support to backdrop upload button.

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

@@ -86,7 +86,7 @@ const StageSelector = props => {
                         title: intl.formatMessage(messages.addBackdropFromFile),
                         img: fileUploadIcon,
                         onClick: onBackdropFileUploadClick,
-                        fileAccept: '.svg', // Bitmap coming soon
+                        fileAccept: '.svg, .png, .jpg, .jpeg', // Bitmap coming soon
                         fileChange: onBackdropFileUpload,
                         fileInput: fileInputRef
                     }, {

src/containers/stage-selector.jsx

@@ -10,6 +10,8 @@ import StageSelectorComponent from '../components/stage-selector/stage-selector.
 
 import backdropLibraryContent from '../lib/libraries/backdrops.json';
 import costumeLibraryContent from '../lib/libraries/costumes.json';
+import {importBitmap} from 'scratch-svg-renderer';
+import log from '../lib/log.js';
 
 class StageSelector extends React.Component {
     constructor (props) {
@@ -63,7 +65,6 @@ class StageSelector extends React.Component {
             // if they choose
             thisFileInput.value = null;
             // Cache the image in storage
-            const backdropBuffer = reader.result;
             const storage = this.props.vm.runtime.storage;
             const fileType = thisFile.type; // check what the browser thinks this is
             // Only handling png and svg right now
@@ -75,26 +76,43 @@ class StageSelector extends React.Component {
             } else if (fileType === 'image/jpeg') {
                 backdropFormat = storage.DataFormat.JPG;
                 assetType = storage.AssetType.ImageBitmap;
-            } else {
+            } else if (fileType === 'image/png') {
                 backdropFormat = storage.DataFormat.PNG;
                 assetType = storage.AssetType.ImageBitmap;
             }
+            if (!backdropFormat) return;
 
-            const md5 = storage.builtinHelper.cache(
-                assetType, backdropFormat, new Uint8Array(backdropBuffer));
+            const addBackdropFromBuffer = (function (error, backdropBuffer) {
+                if (error) {
+                    log.warn(`An error occurred while trying to extract image data: ${error}`);
+                    return;
+                }
 
-            const md5Ext = `${md5}.${backdropFormat}`;
+                const md5 = storage.builtinHelper.cache(
+                    assetType, backdropFormat, backdropBuffer);
 
-            const vmBackdrop = {
-                name: 'backdrop1',
-                dataFormat: backdropFormat,
-                md5: `${md5Ext}`
-            };
+                const md5Ext = `${md5}.${backdropFormat}`;
 
-            this.props.vm.addBackdrop(md5Ext, vmBackdrop);
+                const vmBackdrop = {
+                    name: 'backdrop1',
+                    dataFormat: backdropFormat,
+                    md5: `${md5Ext}`
+                };
 
-            this.props.onActivateTab(COSTUMES_TAB_INDEX);
+                this.props.vm.addBackdrop(md5Ext, vmBackdrop);
+                this.props.onActivateTab(COSTUMES_TAB_INDEX);
+            }).bind(this);
 
+            if (backdropFormat === storage.DataFormat.SVG) {
+                // Must pass in file data as a Uint8Array,
+                // passing in an array buffer causes the sprite/costume
+                // thumbnails to not display because the data URI for the costume
+                // is invalid
+                addBackdropFromBuffer(null, new Uint8Array(reader.result));
+            } else {
+                // otherwise it's a bitmap
+                importBitmap(reader.result, addBackdropFromBuffer);
+            }
         };
         if (thisFileInput.files) {
             thisFile = thisFileInput.files[0];