diff --git a/src/components/action-menu/action-menu.css b/src/components/action-menu/action-menu.css index 27c2ac7f8..9dab244f8 100644 --- a/src/components/action-menu/action-menu.css +++ b/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 */ } diff --git a/src/components/action-menu/action-menu.jsx b/src/components/action-menu/action-menu.jsx index 910d1ab6a..d52d1b9b4 100644 --- a/src/components/action-menu/action-menu.jsx +++ b/src/components/action-menu/action-menu.jsx @@ -136,8 +136,10 @@ class ActionMenu extends React.Component { />
- {(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 (
@@ -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)} > + {hasFileInput ? ( + ) : null} { + // 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,