Change avatar from user CP nav

Change avatar from user CP nav - Printable Version

+- MyBB Community Forums (https://community.mybb.com)
+-- Forum: Extensions (https://community.mybb.com/forum-201.html)
+--- Forum: Themes (https://community.mybb.com/forum-103.html)
+---- Forum: Theme Development (https://community.mybb.com/forum-105.html)
+---- Thread: Change avatar from user CP nav (/thread-199017.html)

Change avatar from user CP nav - brad-t - 2016-08-28

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

[Image: b0vsZNH.png]

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

RE: Change avatar from user CP nav - brad-t - 2016-08-31

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

RE: Change avatar from user CP nav - Omar G. - 2016-08-31

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.

RE: Change avatar from user CP nav - brad-t - 2016-09-01

Thanks, that worked for me!