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

      <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>

      .then ([resource]) =>
        putFile resource.src, file
      .then =>
        @["#{type}Get"] = null # Uncache the local request so that rerendering makes it again.
        @forceUpdate()
      .catch (error) =>
        newState = {}
        newState[errorProp] = error
        @setState newState

  handleMediaClear: (type) ->
    errorProp = "#{type}Error"

    newState = {}
    newState[errorProp] = null
    @setState newState

    @["#{type}Get"]
      .then (resource) =>
        resource?.delete()
      .then =>
        @["#{type}Get"] = null
        @forceUpdate()
      .catch (error) =>
        newState = {}
        newState[errorProp] = error
        @setState newState
