Boilerplate avatar/header selector

app/gabsocial/features/edit_profile/components/profile_preview.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { acctFull } from 'gabsocial/utils/accounts';
+
+const ProfilePreview = ({ account }) => (
+  <div className='card h-card'>
+    <a target='_blank' rel='noopener' href={account.get('url')}>
+      <div className='card__img'>
+        <img alt='' src={account.get('header')} />
+      </div>
+      <div className='card__bar'>
+        <div className='avatar'>
+          <img alt='' className='u-photo' src={account.get('avatar')} width='48' height='48' />
+        </div>
+        <div className='display-name'>
+          <span style={{ display: 'none' }}>{account.get('username')}</span>
+          <bdi>
+            <strong className='emojify p-name'>{account.get('display_name')}</strong>
+          </bdi>
+          <span>{acctFull(account)}</span>
+        </div>
+      </div>
+    </a>
+  </div>
+);
+
+ProfilePreview.propTypes = {
+  account: ImmutablePropTypes.map,
+};
+
+export default ProfilePreview;

app/gabsocial/features/edit_profile/index.js

@@ -10,7 +10,10 @@ import {
   FieldsGroup,
   TextInput,
   Checkbox,
+  FileChooser,
 } from 'gabsocial/features/forms';
+import ProfilePreview from './components/profile_preview';
+import { Map as ImmutableMap } from 'immutable';
 import { patchMe } from 'gabsocial/actions/me';
 
 const messages = defineMessages({
@@ -97,6 +100,32 @@ class EditProfile extends ImmutablePureComponent {
                 value={this.state.note}
                 onChange={this.handleTextChange}
               />
+              <div className='fields-row'>
+                <div className='fields-row__column fields-row__column-6'>
+                  <ProfilePreview
+                    account={ImmutableMap({
+                      url: this.state.url,
+                      header: this.state.header,
+                      avatar: this.state.avatar,
+                      username: this.state.username,
+                      display_name: this.state.display_name,
+                      acct: this.state.acct,
+                    })}
+                  />
+                </div>
+                <div className='fields-row__column fields-group fields-row__column-6'>
+                  <FileChooser
+                    label='Header'
+                    name='header'
+                    hint='PNG, GIF or JPG. At most 2 MB. Will be downscaled to 1500x500px'
+                  />
+                  <FileChooser
+                    label='Avatar'
+                    name='avatar'
+                    hint='PNG, GIF or JPG. At most 2 MB. Will be downscaled to 400x400px'
+                  />
+                </div>
+              </div>
               <Checkbox
                 label='Lock account'
                 hint='Requires you to manually approve followers'

app/gabsocial/features/forms/index.js

@@ -218,3 +218,40 @@ export class TextInput extends ImmutablePureComponent {
   }
 
 }
+
+export class FileChooser extends ImmutablePureComponent {
+
+  static propTypes = {
+    label: PropTypes.string,
+    hint: PropTypes.string,
+    fileTypes: PropTypes.array,
+  }
+
+  static defaultProps = {
+    fileTypes: ['image/jpeg', 'image/png', 'image/gif', 'image/webp'],
+  }
+
+  render() {
+    const { label, hint, fileTypes, ...props } = this.props;
+    const id = uuidv4();
+
+    return (
+      <div className='input with_label file optional field_with_hint'>
+        <div className='label_input'>
+          <label className='file optional' htmlFor={id}>{label}</label>
+          <div className='label_input__wrapper'>
+            <input
+              id={id}
+              accept={fileTypes.join(',')}
+              className='file optional'
+              type='file'
+              {...props}
+            />
+          </div>
+        </div>
+        <span className='hint'>{hint}</span>
+      </div>
+    );
+  }
+
+}