             <div style={width: '20vw'}>
               <ImageSelector maxSize={MAX_AVATAR_SIZE} ratio={1} defaultValue={avatar?.src} placeholder={placeholder} onChange={@handleMediaChange.bind(this, 'avatar')} />
             </div>
+            <div>
+              <button type="button" disabled={avatar is null} onClick={@handleMediaClear.bind(this, 'avatar')}>Clear avatar</button>
+            </div>
           </div>
         }</PromiseRenderer>
         {if @state.avatarError

      <hr />
      <div className="content-container">
        <h3>Change profile header</h3>
        <PromiseRenderer promise={@headerGet}>{(header) =>
          placeholder = <p className="content-container">Drop an image here (or click to select).</p>
          <div>
            <p className="form-help">Drop an image here (any dimensions, less than {Math.floor MAX_HEADER_SIZE / 1000} KB)</p>
            <div style={width: '40vw'}>
              <ImageSelector maxSize={MAX_HEADER_SIZE} defaultValue={header?.src} placeholder={placeholder} onChange={@handleMediaChange.bind(this, 'profile_header')} />
            </div>
          </div>
        }</PromiseRenderer>

    headerError: null

  render: ->
    @avatarGet ?= @props.user.get 'avatar', {}
      .then ([avatar]) ->
        avatar
      .catch ->
        null
    @profile_headerGet ?= @props.user.get 'profile_header', {}
      .then ([header]) ->
        header
      .catch ->
