Change avatar from user CP nav

[brad-t]

Currently the user CP I'm developing looks like this. Everything on the left is the user CP nav.




Clicking the avatar (or the camera icon on top of it) initially took you to the user CP change avatar page, but I figured I could skip some steps by simply making it open the file upload dialog and uploading the image, which works! I wrapped the block in the same form code from the usercp_avatar template.

 <form enctype="multipart/form-data" action="usercp.php" id="change-avatar">
		<input type="hidden" name="my_post_key" value="{$mybb->post_code}" />
        <input type="hidden" name="action" value="do_avatar" />
		<input type="file" name="avatarupload" class="form-control" id="avatarupload" style="display: none;">
			<a href="#" id="nav-change-avatar" onclick='$("#avatarupload").click()' value="Upload"/><span class="fa-stack">
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-camera fa-stack-1x fa-inverse"></i>
</span><img src="{$mybb->user['avatar']}" class="avatar with-group"></a>
				<span class="group-tag group-id-{$mybb->user['usergroup']}">{$mybb->usergroup['title']}</span>
									
									            <button type="submit" class="btn btn-primary" name="submit" value="1">{$lang->change_avatar}</button><br />
							</form>

Unsurprisingly this wasn't enough; when the form submits, you just get a blank page.

Core edits are OK (I will use the Patches plugin), but can anyone figure out how I can get this form to submit from the user CP nav anywhere within the user CP?

(Also, how I can get the form to submit as soon as the image has been uploaded? Probably I should put some sort of refresh icon over the avatar while it's uploading ...)