diff --git a/src/components/action-menu/action-menu.jsx b/src/components/action-menu/action-menu.jsx index 36cf5d4449f7ddd1815cb5388d3784915a709a3e..f9e50f3ff667e02ff78cc5d345e761993e9b8709 100644 --- a/src/components/action-menu/action-menu.jsx +++ b/src/components/action-menu/action-menu.jsx @@ -142,7 +142,7 @@ class ActionMenu extends React.Component { <div className={styles.moreButtonsOuter}> <div className={styles.moreButtons}> {(moreButtons || []).map(({img, title, onClick: handleClick, - fileAccept, fileChange, fileInput}, keyId) => { + fileAccept, fileChange, fileInput, fileMultiple}, keyId) => { const isComingSoon = !handleClick; const hasFileInput = fileInput; const tooltipId = `${this.mainTooltipId}-${title}`; @@ -166,6 +166,7 @@ class ActionMenu extends React.Component { <input accept={fileAccept} className={styles.fileInput} + multiple={fileMultiple} ref={fileInput} type="file" onChange={fileChange} @@ -198,7 +199,8 @@ ActionMenu.propTypes = { onClick: PropTypes.func, // Optional, "coming soon" if no callback provided fileAccept: PropTypes.string, // Optional, only for file upload fileChange: PropTypes.func, // Optional, only for file upload - fileInput: PropTypes.func // Optional, only for file upload + fileInput: PropTypes.func, // Optional, only for file upload + fileMultiple: PropTypes.bool // Optional, only for file upload })), onClick: PropTypes.func.isRequired, title: PropTypes.node.isRequired, diff --git a/src/components/sprite-selector/sprite-selector.jsx b/src/components/sprite-selector/sprite-selector.jsx index 115eaee955f25d6ccba82b86c7f8206cc0ee3719..d834f43b03bd44a23ce4fe6326543670439dbe27 100644 --- a/src/components/sprite-selector/sprite-selector.jsx +++ b/src/components/sprite-selector/sprite-selector.jsx @@ -122,7 +122,8 @@ const SpriteSelectorComponent = function (props) { onClick: onFileUploadClick, fileAccept: '.svg, .png, .jpg, .jpeg, .sprite2, .sprite3', fileChange: onSpriteUpload, - fileInput: spriteFileInput + fileInput: spriteFileInput, + fileMultiple: true }, { title: intl.formatMessage(messages.addSpriteFromSurprise), img: surpriseIcon, diff --git a/src/components/stage-selector/stage-selector.jsx b/src/components/stage-selector/stage-selector.jsx index 64a1948a82670324221c5743f0657e9215d89677..db89a67c5a961a5419d7bf5cb850bd75ae504813 100644 --- a/src/components/stage-selector/stage-selector.jsx +++ b/src/components/stage-selector/stage-selector.jsx @@ -104,7 +104,8 @@ const StageSelector = props => { onClick: onBackdropFileUploadClick, fileAccept: '.svg, .png, .jpg, .jpeg', // Bitmap coming soon fileChange: onBackdropFileUpload, - fileInput: fileInputRef + fileInput: fileInputRef, + fileMultiple: true }, { title: intl.formatMessage(messages.addBackdropFromSurprise), img: surpriseIcon, diff --git a/src/containers/costume-tab.jsx b/src/containers/costume-tab.jsx index 83b27d4c3252cccd83c1f1567d73d486c4790b5d..a5b97d9cb4306e4d2cf3ada0e21e3bac30f125af 100644 --- a/src/containers/costume-tab.jsx +++ b/src/containers/costume-tab.jsx @@ -292,7 +292,8 @@ class CostumeTab extends React.Component { onClick: this.handleFileUploadClick, fileAccept: '.svg, .png, .jpg, .jpeg', fileChange: this.handleCostumeUpload, - fileInput: this.setFileInput + fileInput: this.setFileInput, + fileMultiple: true }, { title: intl.formatMessage(messages.addSurpriseCostumeMsg), diff --git a/src/containers/sound-tab.jsx b/src/containers/sound-tab.jsx index 40e08dfb737321de558b278c011c4a2e9e980142..f417d238f33238400829064bb87b0dab57acc22c 100644 --- a/src/containers/sound-tab.jsx +++ b/src/containers/sound-tab.jsx @@ -223,7 +223,8 @@ class SoundTab extends React.Component { onClick: this.handleFileUploadClick, fileAccept: '.wav, .mp3', fileChange: this.handleSoundUpload, - fileInput: this.setFileInput + fileInput: this.setFileInput, + fileMultiple: true }, { title: intl.formatMessage(messages.surpriseSound), img: surpriseIcon, diff --git a/src/lib/file-uploader.js b/src/lib/file-uploader.js index 74f3c64a8625c05610c4e0d505484e56fc4a8600..dec463d6d81a1ca887349010843472bb8e3b2c99 100644 --- a/src/lib/file-uploader.js +++ b/src/lib/file-uploader.js @@ -21,21 +21,22 @@ const extractFileName = function (nameExt) { * @param {Function} onload The function that handles loading the file */ const handleFileUpload = function (fileInput, onload) { - let thisFile = null; - const reader = new FileReader(); - reader.onload = () => { - // Reset the file input value now that we have everything we need - // so that the user can upload the same sound multiple times if - // they choose - fileInput.value = null; - const fileType = thisFile.type; - const fileName = extractFileName(thisFile.name); + const readFile = file => { + const reader = new FileReader(); + reader.onload = () => { + // Reset the file input value now that we have everything we need + // so that the user can upload the same sound multiple times if + // they choose + fileInput.value = null; + const fileType = file.type; + const fileName = extractFileName(file.name); - onload(reader.result, fileType, fileName); + onload(reader.result, fileType, fileName); + }; + reader.readAsArrayBuffer(file); }; - if (fileInput.files) { - thisFile = fileInput.files[0]; - reader.readAsArrayBuffer(thisFile); + for (let i = 0; i < fileInput.files.length; i++) { + readFile(fileInput.files[i]); } };