Compose: pull accept content types from backend if available, fallback to all types

app/soapbox/features/compose/components/upload_button.js

@@ -10,9 +10,13 @@ const messages = defineMessages({
   upload: { id: 'upload_button.label', defaultMessage: 'Add media attachment' },
 });
 
+const onlyImages = types => {
+  return Boolean(types && types.every(type => type.startsWith('image/')));
+};
+
 const makeMapStateToProps = () => {
   const mapStateToProps = state => ({
-    acceptContentTypes: state.getIn(['media_attachments', 'accept_content_types']),
+    attachmentTypes: state.getIn(['instance', 'configuration', 'media_attachments', 'supported_mime_types']),
   });
 
   return mapStateToProps;
@@ -28,7 +32,7 @@ class UploadButton extends ImmutablePureComponent {
     onSelectFile: PropTypes.func.isRequired,
     style: PropTypes.object,
     resetFileKey: PropTypes.number,
-    acceptContentTypes: ImmutablePropTypes.listOf(PropTypes.string).isRequired,
+    attachmentTypes: ImmutablePropTypes.listOf(PropTypes.string),
     intl: PropTypes.object.isRequired,
   };
 
@@ -47,17 +51,21 @@ class UploadButton extends ImmutablePureComponent {
   }
 
   render() {
-    const { intl, resetFileKey, unavailable, disabled } = this.props;
+    const { intl, resetFileKey, attachmentTypes, unavailable, disabled } = this.props;
 
     if (unavailable) {
       return null;
     }
 
+    const src = onlyImages(attachmentTypes)
+      ? require('@tabler/icons/icons/photo.svg')
+      : require('@tabler/icons/icons/paperclip.svg');
+
     return (
       <div className='compose-form__upload-button'>
         <IconButton
           className='compose-form__upload-button-icon'
-          src={require('@tabler/icons/icons/paperclip.svg')}
+          src={src}
           title={intl.formatMessage(messages.upload)}
           disabled={disabled}
           onClick={this.handleClick}
@@ -69,8 +77,7 @@ class UploadButton extends ImmutablePureComponent {
             ref={this.setRef}
             type='file'
             multiple
-            // Accept all types for now.
+            accept={attachmentTypes && attachmentTypes.toArray().join(',')}
-            // accept={acceptContentTypes.toArray().join(',')}
             onChange={this.handleChange}
             disabled={disabled}
             style={{ display: 'none' }}

app/soapbox/reducers/__tests__/media_attachments-test.js

@@ -1,34 +0,0 @@
-import reducer from '../media_attachments';
-import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
-
-describe('media_attachments reducer', () => {
-  it('should return the initial state', () => {
-    expect(reducer(undefined, {})).toEqual(ImmutableMap({
-      accept_content_types: ImmutableList([
-        '.jpg',
-        '.jpeg',
-        '.png',
-        '.gif',
-        '.webp',
-        '.webm',
-        '.mp4',
-        '.m4v',
-        '.mov',
-        '.mp3',
-        '.ogg',
-        '.wav',
-        'image/jpeg',
-        'image/png',
-        'image/gif',
-        'image/webp',
-        'video/webm',
-        'video/mp4',
-        'video/quicktime',
-        'audio/mp3',
-        'audio/mpeg',
-        'audio/ogg',
-        'audio/wav',
-      ]),
-    }));
-  });
-});

app/soapbox/reducers/index.js

@@ -20,7 +20,6 @@ import reports from './reports';
 import contexts from './contexts';
 import compose from './compose';
 import search from './search';
-import media_attachments from './media_attachments';
 import notifications from './notifications';
 import height_cache from './height_cache';
 import custom_emojis from './custom_emojis';
@@ -76,7 +75,6 @@ const appReducer = combineReducers({
   contexts,
   compose,
   search,
-  media_attachments,
   notifications,
   height_cache,
   custom_emojis,

app/soapbox/reducers/media_attachments.js

@@ -1,40 +0,0 @@
-import {
-  Map as ImmutableMap,
-  List as ImmutableList,
-} from 'immutable';
-
-const initialState = ImmutableMap({
-  // FIXME: Leave this empty and pull from backend
-  accept_content_types: ImmutableList([
-    '.jpg',
-    '.jpeg',
-    '.png',
-    '.gif',
-    '.webp',
-    '.webm',
-    '.mp4',
-    '.m4v',
-    '.mov',
-    '.mp3',
-    '.ogg',
-    '.wav',
-    'image/jpeg',
-    'image/png',
-    'image/gif',
-    'image/webp',
-    'video/webm',
-    'video/mp4',
-    'video/quicktime',
-    'audio/mp3',
-    'audio/mpeg',
-    'audio/ogg',
-    'audio/wav',
-  ]),
-});
-
-export default function meta(state = initialState, action) {
-  switch(action.type) {
-  default:
-    return state;
-  }
-}