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

[brad-t]

Will give it just one bump. Hope someone knows the answer.

[Omar G.]

The following works for me:

<form enctype="multipart/form-data" action="usercp.php" method="post" style="display: none;">
	<input type="hidden" name="my_post_key" value="{$mybb->post_code}" />
	<input type="file" name="avatarupload" id="avatarupload" />
	<input type="hidden" name="action" value="do_avatar" />
</form>
<script>
	$('#avatarupload').change(function() {
		$(this).parents('form:first').submit();
	});
</script>
<a href="#" id="nav-change-avatar" onclick='$("#avatarupload").click()' value="Upload"><span class="fa-stack">click me</span><img src="{$mybb->user['avatar']}" class="avatar with-group"></a><br />

The form doesn't even needs to be displayed at all, you can place it at the end of the template. You will need a plugin to redirect the page back to the UPC instead of the upload page. Or a plugin to handle the ajax call to refresh the avatar as soon as it is uploaded.

I suppose something one that hooks and echoes the encoded data from "usercp_do_avatar_end" and some JS function in submit() to handle that data. Though I'm not good at JS so I'm just guessing.

[brad-t]

Thanks, that worked for me!