From f2b398ae0ebbee1658a5a006ca3fdcd5f0472ab9 Mon Sep 17 00:00:00 2001
From: Karishma Chadha <kchadha@scratch.mit.edu>
Date: Sun, 22 Apr 2018 02:21:22 -0400
Subject: [PATCH] Bitmap upload -- mostly working, code needs cleanup.
---
package.json | 1 +
src/containers/costume-tab.jsx | 41 +++++++++++++++++++++++-----------
2 files changed, 29 insertions(+), 13 deletions(-)
diff --git a/package.json b/package.json
index 432d01e29..2e0171fc5 100644
--- a/package.json
+++ b/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",
diff --git a/src/containers/costume-tab.jsx b/src/containers/costume-tab.jsx
index 425fe144f..d75162648 100644
--- a/src/containers/costume-tab.jsx
+++ b/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}`;
- this.props.vm.addCostume(md5Ext, vmCostume);
+ const vmCostume = {
+ name: 'costume1',
+ dataFormat: costumeFormat,
+ md5: `${md5Ext}`
+ };
+ thisThing.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
},
--
GitLab