Prevent selection of unacceptable Content-Type files (#2910)

* Prevent selection of unacceptable Content-Type files

* replace hard code

* media_attachments accept content-types in initial state

3 files changed, 38 insertions, 3 deletions

diff --git a/app/javascript/mastodon/features/compose/components/upload_button.js b/app/javascript/mastodon/features/compose/components/upload_button.js
index 15ec2edd6..06b290467 100644
--- a/app/javascript/mastodon/features/compose/components/upload_button.js
+++ b/app/javascript/mastodon/features/compose/components/upload_button.js
@@ -2,11 +2,19 @@ import React from 'react';
 import IconButton from '../../../components/icon_button';
 import PropTypes from 'prop-types';
 import { defineMessages, injectIntl } from 'react-intl';
+import { connect } from 'react-redux';
 
 const messages = defineMessages({
   upload: { id: 'upload_button.label', defaultMessage: 'Add media' }
 });
 
+const makeMapStateToProps = () => {
+  const mapStateToProps = (state, props) => ({
+    acceptContentTypes: state.getIn(['media_attachments', 'accept_content_types']).toArray(),
+  });
+
+  return mapStateToProps;
+}
 
 const iconStyle = {
   height: null,
@@ -38,12 +46,21 @@ class UploadButton extends React.PureComponent {
 
   render () {
 
-    const { intl, resetFileKey, disabled } = this.props;
+    const { intl, resetFileKey, disabled, acceptContentTypes } = this.props;
 
     return (
       <div className='compose-form__upload-button'>
         <IconButton icon='camera' title={intl.formatMessage(messages.upload)} disabled={disabled} onClick={this.handleClick} className='compose-form__upload-button-icon' size={18} inverted style={iconStyle}/>
-        <input key={resetFileKey} ref={this.setRef} type='file' multiple={false} onChange={this.handleChange} disabled={disabled} style={{ display: 'none' }} />
+        <input
+          key={resetFileKey}
+          ref={this.setRef}
+          type='file'
+          multiple={false}
+          accept={ acceptContentTypes.join(',')}
+          onChange={this.handleChange}
+          disabled={disabled}
+          style={{ display: 'none' }}
+        />
       </div>
     );
   }
@@ -55,7 +72,8 @@ UploadButton.propTypes = {
   onSelectFile: PropTypes.func.isRequired,
   style: PropTypes.object,
   resetFileKey: PropTypes.number,
+  acceptContentTypes: PropTypes.arrayOf(PropTypes.string).isRequired,
   intl: PropTypes.object.isRequired
 };
 
-export default injectIntl(UploadButton);
+export default connect(makeMapStateToProps)(injectIntl(UploadButton));
diff --git a/app/javascript/mastodon/reducers/index.js b/app/javascript/mastodon/reducers/index.js
index f05067c47..0665f494b 100644
--- a/app/javascript/mastodon/reducers/index.js
+++ b/app/javascript/mastodon/reducers/index.js
@@ -9,6 +9,7 @@ import user_lists from './user_lists';
 import accounts from './accounts';
 import accounts_counters from './accounts_counters';
 import statuses from './statuses';
+import media_attachments from './media_attachments';
 import relationships from './relationships';
 import search from './search';
 import notifications from './notifications';
@@ -28,6 +29,7 @@ export default combineReducers({
   status_lists,
   accounts,
   accounts_counters,
+  media_attachments,
   statuses,
   relationships,
   search,
diff --git a/app/javascript/mastodon/reducers/media_attachments.js b/app/javascript/mastodon/reducers/media_attachments.js
new file mode 100644
index 000000000..85bea4f0b
--- /dev/null
+++ b/app/javascript/mastodon/reducers/media_attachments.js
@@ -0,0 +1,15 @@
+import { STORE_HYDRATE } from '../actions/store';
+import Immutable from 'immutable';
+
+const initialState = Immutable.Map({
+  accept_content_types: [],
+});
+
+export default function meta(state = initialState, action) {
+  switch(action.type) {
+  case STORE_HYDRATE:
+    return state.merge(action.state.get('media_attachments'));
+  default:
+    return state;
+  }
+};