upload sound from a file

src/components/action-menu/action-menu.css

@@ -80,6 +80,10 @@ $more-button-size: 2.25rem;
     z-index: 10; /* @todo justify */
 }
 
+.file-input {
+    display: none;
+}
+
 .expanded .more-buttons {
     max-height: 1000px; /* Arbitrary, needs to be a value in order for animation to run */
 }

src/components/action-menu/action-menu.jsx

@@ -136,8 +136,10 @@ class ActionMenu extends React.Component {
                 />
                 <div className={styles.moreButtonsOuter}>
                     <div className={styles.moreButtons}>
-                        {(moreButtons || []).map(({img, title, onClick: handleClick}) => {
+                        {(moreButtons || []).map(({img, title, onClick: handleClick,
+                            fileInput, accept: fileAccept, fileChange, fileInputRef}) => {
                             const isComingSoon = !handleClick;
+                            const hasFileInput = fileInput;
                             const tooltipId = `tooltip-${Math.random()}`;
                             return (
                                 <div key={tooltipId}>
@@ -148,13 +150,21 @@ class ActionMenu extends React.Component {
                                         })}
                                         data-for={tooltipId}
                                         data-tip={title}
-                                        onClick={this.clickDelayer(handleClick)}
+                                        onClick={hasFileInput ? handleClick : this.clickDelayer(handleClick)}
                                     >
                                         <img
                                             className={styles.moreIcon}
                                             draggable={false}
                                             src={img}
                                         />
+                                        {hasFileInput ? (
+                                            <input
+                                                accept={fileAccept}
+                                                className={styles.fileInput}
+                                                ref={fileInputRef}
+                                                type={fileInput}
+                                                onChange={fileChange}
+                                            />) : null}
                                     </button>
                                     <ReactTooltip
                                         className={classNames(styles.tooltip, {
@@ -180,7 +190,11 @@ ActionMenu.propTypes = {
     moreButtons: PropTypes.arrayOf(PropTypes.shape({
         img: PropTypes.string,
         title: PropTypes.node.isRequired,
-        onClick: PropTypes.func // Optional, "coming soon" if no callback provided
+        onClick: PropTypes.func, // Optional, "coming soon" if no callback provided
+        fileInput: PropTypes.string, // Optional, only for file and camera upload
+        accept: PropTypes.string, // Optional, only for file and camera upload
+        fileChange: PropTypes.func, // Optional, only for file and camera upload
+        fileInputRef: PropTypes.func
     })),
     onClick: PropTypes.func.isRequired,
     title: PropTypes.node.isRequired

src/containers/sound-tab.jsx

@@ -33,7 +33,10 @@ class SoundTab extends React.Component {
             'handleDeleteSound',
             'handleDuplicateSound',
             'handleNewSound',
-            'handleSurpriseSound'
+            'handleSurpriseSound',
+            'handleFileUploadClick',
+            'handleSoundUpload',
+            'setFileInput'
         ]);
         this.state = {selectedSoundIndex: 0};
     }
@@ -98,6 +101,48 @@ class SoundTab extends React.Component {
         });
     }
 
+    handleFileUploadClick () {
+        this.fileInput.click();
+    }
+
+    handleSoundUpload (e) {
+        const thisFileInput = e.target;
+        const reader = new FileReader();
+        reader.onload = () => {
+            // Cache the sound in storage
+            const soundBuffer = reader.result;
+            const storage = this.props.vm.runtime.storage;
+            // TODO only accepting .wav files right now,
+            // but later will have to do something sensible with other types of sounds
+            const soundFormat = storage.DataFormat.WAV;
+            const md5 = storage.builtinHelper.cache(
+                storage.AssetType.Sound,
+                soundFormat,
+                new Uint8Array(soundBuffer),
+            );
+            // Add the sound to vm
+            const newSound = {
+                format: '',
+                name: 'sound1',
+                dataFormat: soundFormat,
+                md5: `${md5}.${soundFormat}`
+            };
+
+            this.props.vm.addSound(newSound).then(() => {
+                this.handleNewSound();
+            });
+        };
+        if (thisFileInput.files) {
+            reader.readAsArrayBuffer(thisFileInput.files[0]);
+            thisFileInput.value = null;
+        }
+    }
+
+    setFileInput (input) {
+        console.log('setting file input!');
+        if (input && !this.fileInput) this.fileInput = input;
+    }
+
     render () {
         const {
             intl,
@@ -122,7 +167,7 @@ class SoundTab extends React.Component {
 
         const messages = defineMessages({
             fileUploadSound: {
-                defaultMessage: 'Coming Soon',
+                defaultMessage: 'Upload Sound',
                 description: 'Button to upload sound from file in the editor tab',
                 id: 'gui.soundTab.fileUploadSound'
             },
@@ -151,7 +196,12 @@ class SoundTab extends React.Component {
                     onClick: onNewSoundFromLibraryClick
                 }, {
                     title: intl.formatMessage(messages.fileUploadSound),
-                    img: fileUploadIcon
+                    img: fileUploadIcon,
+                    onClick: this.handleFileUploadClick,
+                    fileInput: 'file',
+                    accept: '.wav, .mp3',
+                    fileChange: this.handleSoundUpload,
+                    fileInputRef: this.setFileInput
                 }, {
                     title: intl.formatMessage(messages.surpriseSound),
                     img: surpriseIcon,