Media: prefer V2 media API when available

app/soapbox/actions/media.js

@@ -1,11 +1,34 @@
 import api from '../api';
+import { getFeatures } from 'soapbox/utils/features';
 
 const noOp = () => {};
 
-export function uploadMedia(data, onUploadProgress = noOp) {
+export function uploadMediaV1(data, onUploadProgress = noOp) {
-  return function(dispatch, getState) {
+  return (dispatch, getState) => {
     return api(getState).post('/api/v1/media', data, {
       onUploadProgress: onUploadProgress,
     });
   };
 }
+
+export function uploadMediaV2(data, onUploadProgress = noOp) {
+  return (dispatch, getState) => {
+    return api(getState).post('/api/v2/media', data, {
+      onUploadProgress: onUploadProgress,
+    });
+  };
+}
+
+export function uploadMedia(data, onUploadProgress = noOp) {
+  return (dispatch, getState) => {
+    const state = getState();
+    const instance = state.get('instance');
+    const features = getFeatures(instance);
+
+    if (features.mediaV2) {
+      return dispatch(uploadMediaV2(data, onUploadProgress));
+    } else {
+      return dispatch(uploadMediaV1(data, onUploadProgress));
+    }
+  };
+}

app/soapbox/components/icon_button.js

@@ -140,7 +140,7 @@ export default class IconButton extends React.PureComponent {
               ? <div className='icon-button__emoji' dangerouslySetInnerHTML={{ __html: emojify(emoji) }} aria-hidden='true' />
               : <Icon id={icon} src={src} fixedWidth aria-hidden='true' />}
           </div>
-          {text && <span className='icon_button__text'>{text}</span>}
+          {text && <span className='icon-button__text'>{text}</span>}
         </button>
       );
     }
@@ -169,7 +169,7 @@ export default class IconButton extends React.PureComponent {
                 ? <div className='icon-button__emoji' style={{ transform: `rotate(${rotate}deg)` }} dangerouslySetInnerHTML={{ __html: emojify(emoji) }} aria-hidden='true' />
                 : <Icon id={icon} src={src} style={{ transform: `rotate(${rotate}deg)` }} fixedWidth aria-hidden='true' />}
             </div>
-            {text && <span className='icon_button__text'>{text}</span>}
+            {text && <span className='icon-button__text'>{text}</span>}
           </button>
         )}
       </Motion>

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

@@ -7,6 +7,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 import Icon from 'soapbox/components/icon';
+import IconButton from 'soapbox/components/icon_button';
 import Blurhash from 'soapbox/components/blurhash';
 
 const MIMETYPE_ICONS = {
@@ -153,8 +154,20 @@ class Upload extends ImmutablePureComponent {
                 backgroundPosition: `${x}% ${y}%` }}
             >
               <div className={classNames('compose-form__upload__actions', { active })}>
-                <button className='icon-button' onClick={this.handleUndoClick}><Icon id='times' /> <FormattedMessage id='upload_form.undo' defaultMessage='Delete' /></button>
+                <IconButton
-                {mediaType !== 'unknown' && <button className='icon-button' onClick={this.handleOpenModal}><Icon id='search-plus' /> <FormattedMessage id='upload_form.preview' defaultMessage='Preview' /></button>}
+                  onClick={this.handleUndoClick}
+                  src={require('@tabler/icons/icons/x.svg')}
+                  text={<FormattedMessage id='upload_form.undo' defaultMessage='Delete' />}
+                />
+
+                {/* Only display the "Preview" button for a valid attachment with a URL */}
+                {(mediaType !== 'unknown' && Boolean(media.get('url'))) && (
+                  <IconButton
+                    onClick={this.handleOpenModal}
+                    src={require('@tabler/icons/icons/zoom-in.svg')}
+                    text={<FormattedMessage id='upload_form.preview' defaultMessage='Preview' />}
+                  />
+                )}
               </div>
 
               <div className={classNames('compose-form__upload-description', { active })}>

app/soapbox/utils/features.js

@@ -26,6 +26,10 @@ export const getFeatures = createSelector([
     suggestions: v.software === MASTODON && gte(v.compatVersion, '2.4.3'),
     suggestionsV2: v.software === MASTODON && gte(v.compatVersion, '3.4.0'),
     trends: v.software === MASTODON && gte(v.compatVersion, '3.0.0'),
+    mediaV2: any([
+      v.software === MASTODON && gte(v.compatVersion, '3.1.3'),
+      v.software === PLEROMA && gte(v.version, '2.1.0'),
+    ]),
     emojiReacts: v.software === PLEROMA && gte(v.version, '2.0.0'),
     emojiReactsRGI: v.software === PLEROMA && gte(v.version, '2.2.49'),
     attachmentLimit: v.software === PLEROMA ? Infinity : 4,

app/styles/components/detailed-status.scss

@@ -86,7 +86,7 @@
     display: inline-flex;
     align-items: center;
 
-    .icon_button__text {
+    &__text {
       font-size: 14px;
       padding-left: 5px;
     }

app/styles/ui.scss

@@ -1,5 +1,6 @@
 .icon-button {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
   padding: 0;
   color: var(--primary-text-color);
   border: 0;
@@ -12,6 +13,10 @@
     margin: 0;
   }
 
+  &__text {
+    padding-left: 2px;
+  }
+
   &:hover,
   &:active,
   &:focus {