Bitmap upload -- mostly working, code needs cleanup.

package.json

@@ -93,6 +93,7 @@
     "scratch-l10n": "2.0.20180108132626",
     "scratch-paint": "0.2.0-prerelease.20180423143518",
     "scratch-render": "0.1.0-prerelease.1523453612",
+    "scratch-svg-renderer": "latest",
     "scratch-storage": "0.4.0",
     "scratch-vm": "0.1.0-prerelease.1524254811",
     "selenium-webdriver": "3.6.0",

src/containers/costume-tab.jsx

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import bindAll from 'lodash.bindall';
 import {defineMessages, intlShape, injectIntl} from 'react-intl';
+import {importBitmap} from 'scratch-svg-renderer';
 import VM from 'scratch-vm';
 
 import AssetPanel from '../components/asset-panel/asset-panel.jsx';
@@ -9,6 +10,7 @@ import PaintEditorWrapper from './paint-editor-wrapper.jsx';
 import CostumeLibrary from './costume-library.jsx';
 import BackdropLibrary from './backdrop-library.jsx';
 import {connect} from 'react-redux';
+import log from '../lib/log.js';
 
 import {
     closeCostumeLibrary,
@@ -170,14 +172,15 @@ class CostumeTab extends React.Component {
         const thisFileInput = e.target;
         let thisFile = null;
         const reader = new FileReader();
+        const thisThing = this;
         reader.onload = () => {
             // Reset the file input value now that we have everything we need
             // so that the user can upload the same image multiple times
             // if they choose
             thisFileInput.value = null;
-            // Cache the image in storage
-            const costumeBuffer = reader.result;
-            const storage = this.props.vm.runtime.storage;
+
+
+            const storage = thisThing.props.vm.runtime.storage;
             const fileType = thisFile.type; // check what the browser thinks this is
             // Only handling png and svg right now
             let costumeFormat = null;
@@ -193,19 +196,31 @@ class CostumeTab extends React.Component {
                 assetType = storage.AssetType.ImageBitmap;
             }
 
-            const md5 = storage.builtinHelper.cache(
-                assetType, costumeFormat, new Uint8Array(costumeBuffer));
+            const addCostumeFromBuffer = function (error, costumeBuffer) {
+                if (error) {
+                    log.warn(`An error occurred while trying to extract image data: ${error}`);
+                    return;
+                }
 
-            const md5Ext = `${md5}.${costumeFormat}`;
+                const md5 = storage.builtinHelper.cache(
+                    assetType, costumeFormat, costumeBuffer);
 
-            const vmCostume = {
-                name: 'costume1',
-                dataFormat: costumeFormat,
-                md5: `${md5Ext}`
+                const md5Ext = `${md5}.${costumeFormat}`;
+
+                const vmCostume = {
+                    name: 'costume1',
+                    dataFormat: costumeFormat,
+                    md5: `${md5Ext}`
+                };
+
+                thisThing.props.vm.addCostume(md5Ext, vmCostume);
             };
 
-            this.props.vm.addCostume(md5Ext, vmCostume);
-
+            if (costumeFormat === storage.DataFormat.SVG) {
+                addCostumeFromBuffer(null, reader.result);
+            } else {
+                importBitmap(reader.result, addCostumeFromBuffer);
+            }
         };
         if (thisFileInput.files) {
             thisFile = thisFileInput.files[0];
@@ -272,7 +287,7 @@ class CostumeTab extends React.Component {
                         title: intl.formatMessage(addFileMessage),
                         img: fileUploadIcon,
                         onClick: this.handleFileUploadClick,
-                        fileAccept: '.svg,', // .png, .jpg, .jpeg coming soon
+                        fileAccept: '.svg, .png, .jpg, .jpeg', // coming soon
                         fileChange: this.handleCostumeUpload,
                         fileInput: this.setFileInput
                     },