Handle images uploaded as sprites

The sprite upload code in GUI serializes asset data, flattening it. We need to rehydrate the asset.

src/serialization/deserialize-assets.js

@@ -71,7 +71,19 @@ const deserializeCostume = function (costume, runtime, zip, assetFileName) {
         return Promise.resolve(null);
     }
 
-    if (!zip) { // Zip will not be provided if loading project json from server
+    if (costume.asset) {
+        // When uploading a sprite from an image file, the asset data will be provided
+        // @todo Cache the asset data somewhere and pull it out here
+        return Promise.resolve(storage.createAsset(
+            costume.asset.assetType,
+            costume.asset.dataFormat,
+            new Uint8Array(Object.keys(costume.asset.data).map(key => costume.asset.data[key])),
+            costume.asset.assetId
+        ));
+    }
+
+    if (!zip) {
+        // Zip will not be provided if loading project json from server
         return Promise.resolve(null);
     }
 

src/serialization/sb3.js

@@ -823,6 +823,9 @@ const parseScratchObject = function (object, runtime, extensions, zip) {
     const costumePromises = (object.costumes || []).map(costumeSource => {
         // @todo: Make sure all the relevant metadata is being pulled out.
         const costume = {
+            // costumeSource only has an asset if an image is being uploaded as
+            // a sprite
+            asset: costumeSource.asset,
             assetId: costumeSource.assetId,
             skinId: null,
             name: costumeSource.name,