Merging (Avatar Upload) Into Registration Form

Need some custom code changes to the phpBB core simple enough that you feel doesn't require an extension? Then post your request here so that community members can provide some assistance.

NOTE: NO OFFICIAL SUPPORT IS PROVIDED IN THIS SUB-FORUM
Forum rules
READ: phpBB.com Board-Wide Rules and Regulations

NOTE: NO OFFICIAL SUPPORT IS PROVIDED IN THIS SUB-FORUM
Post Reply
Selective
Registered User
Posts: 213
Joined: Sat Apr 19, 2014 10:30 am

Merging (Avatar Upload) Into Registration Form

Post by Selective »

I just made backups of my forum and was messing around with this. It seemed simple and easy enough to do. Well, I did attempt it, but might take lots of editing to work out the bugs in it and to make it work.

Can it be done?

If so, how?

The registration form already has a submit button, so it can't have two sets of buttons that say (reset) and (submit), so got rid of one of those pairs of buttons, and now for the submit button to work, the entire form must be filled out, but after registration, no avatar image! So is that because the account must be created first, to attach the avatar to? Should I turn the form into a two page process or change how the image is uploaded?

This puzzle is like a mind scrambler. What is the best option to do this?

UPDATE: Still very confused.

Registration form begins as

Code: Select all

<form id="register" method="post" action="{S_UCP_ACTION}"{S_FORM_ENCTYPE}>
Avatar Edit form begins as

Code: Select all

<form id="ucp" method="post" action="./ucp.php?i=ucp_profile&amp;mode=avatar" enctype="multipart/form-data">
Registration submit buttons are

Code: Select all

	<fieldset class="submit-buttons">
		{S_HIDDEN_FIELDS}
		<input type="reset" value="{L_RESET}" name="reset" class="button2" />&nbsp;
		<input type="submit" tabindex="9" name="submit" id="submit" value="{L_SUBMIT}" class="button1 default-submit-action" />
		{S_FORM_TOKEN}
	</fieldset>

	</div>
</div>
</form>
Avatar Upload submit buttons are

Code: Select all

	<fieldset class="submit-buttons">
		<input value="Reset" name="reset" class="button2" type="reset"> &nbsp;
		<input name="submit" value="Submit" class="button1" type="submit">
	</fieldset>
	</div>
</div>


<input name="creation_time" value="1517034202" type="hidden">
<input name="form_token" value="a280e186997eab5c33446e0cf046b81d243d0ee8" type="hidden">

</form>

I guess I should mention that the script for the avatar upload form was scattered on multiple pages, so I had trouble finding it all and piecing it all together, so I had deleted what I copied from the various script pages for it, and just did a full copy of it from "Inspect Element". So now that I am looking at it, I'll probably have to go back over it and change some of it again.
User avatar
david63
Registered User
Posts: 20646
Joined: Thu Dec 19, 2002 8:08 am

Re: Merging (Avatar Upload) Into Registration Form

Post by david63 »

You also have to take into account whether the group that the user is in after registration has the necessary permissions to add an avatar
David
Remember: You only know what you know and - you don't know what you don't know!

I now no longer support any of my extensions but they will start to become available here
Selective
Registered User
Posts: 213
Joined: Sat Apr 19, 2014 10:30 am

Re: Merging (Avatar Upload) Into Registration Form

Post by Selective »

I think all permissions are set to allow avatars for everyone. I'll double check.

I know it's impossible for a guest to have an avatar, and usually phpBB identifies anyone not logged in as a guest, so I really hope that isn't the problem. However, I really doubt I have the forms set up properly to work together, so it seems like this is going to be a little complicated to figure out. I haven't worked with html forms for a long time, and having the code for them all scattered on multiple pages, that doesn't help either.

Does anyone know how to place two submit buttons on one page, so that you can upload an image without triggering the form to be submitted?

I've seen that done before, but then again, maybe it can't be done on a registration form.
User avatar
mrgoldy
Former Team Member
Posts: 1394
Joined: Tue Oct 06, 2009 7:34 pm
Location: The Netherlands
Name: Gijs
Contact:

Re: Merging (Avatar Upload) Into Registration Form

Post by mrgoldy »

Every post you make, you define something as 'easy' and 'simple to do'. Then followed by "How?" and "Where?".
Just pointing this out as it really, really demotivated me to even bother answering a post your wrote. If you know it all so well, either do it or be a little humble to the people trying to help you, especially to the creators of a FREE open source software. So not paid, just in their spare times.

Anyways,

You will need to have two forms on your page, both with seperate id's and submit button.
And as you posted it at the moment, you have the same id and name for the submit buttons of both forms.
First of all, you shouldn't have a same element id on the page more than once. Secondly, if they are named the same, PHP doesn't know which one was pressed, as they are identical to eachother.

Make your submit button for the avatar:

Code: Select all

	<fieldset class="submit-buttons">
		<input id="avatar_reset" name="avatar_reset" value="{{ lang('RESET') }}" class="button2" type="reset"> &nbsp;
		<input id="avatar_submit" name="avatar_submit" value="{{ lang('SUBMIT') }}" class="button1" type="submit">
		{{ S_FORM_TOKEN }}
	</fieldset>
    </div>
</div>


<input name="creation_time" value="1517034202" type="hidden">
<input name="form_token" value="a280e186997eab5c33446e0cf046b81d243d0ee8" type="hidden">

</form>
Then on the PHP end you can check if this submit button was pressed by:

Code: Select all

$submit = $this->request->is_set_post('avatar_submit');
Make sure to add the form token variable, otherwise you can not use the obligated add_form_key and check_form_key.
phpBB Studio / Member of the Studio

Contributing: You can do it too! Including testing Pull Requests (PR).
phpBB Development and Testing made easy.
Selective
Registered User
Posts: 213
Joined: Sat Apr 19, 2014 10:30 am

Re: Merging (Avatar Upload) Into Registration Form

Post by Selective »

Thanks


I think I have the html side of it workable now.

/template/ucp_register.html

Code: Select all

<!-- INCLUDE overall_header.html -->

<script type="text/javascript">
// <![CDATA[
	/**
	* Change language
	*/
	function change_language(lang_iso)
	{
		document.cookie = '{COOKIE_NAME}_lang=' + lang_iso + '; path={COOKIE_PATH}';
		document.forms['register'].change_lang.value = lang_iso;
		document.forms['register'].submit.click();
	}
// ]]>
</script>

<form id="register" method="post" action="{S_UCP_ACTION}"{S_FORM_ENCTYPE}>

<div class="panel">
	<div class="inner">

	<h2>{SITENAME} - {L_REGISTRATION}</h2>

	<fieldset class="fields2">
	<!-- IF ERROR --><dl><dd class="error">{ERROR}</dd></dl><!-- ENDIF -->
	<!-- IF L_REG_COND -->
		<dl><dd><strong>{L_REG_COND}</strong></dd></dl>
	<!-- ENDIF -->
	<!-- EVENT ucp_register_credentials_before -->
	<dl>
		<dt><label for="username">{L_USERNAME}{L_COLON}</label><br /><span>{L_USERNAME_EXPLAIN}</span></dt>
		<dd><input type="text" tabindex="1" name="username" id="username" size="25" value="{USERNAME}" class="inputbox autowidth" title="{L_USERNAME}" /></dd>
	</dl>
	<dl>
		<dt><label for="email">{L_EMAIL_ADDRESS}{L_COLON}</label></dt>
		<dd><input type="email" tabindex="2" name="email" id="email" size="25" maxlength="100" value="{EMAIL}" class="inputbox autowidth" title="{L_EMAIL_ADDRESS}" autocomplete="off" /></dd>
	</dl>
	<dl>
		<dt><label for="new_password">{L_PASSWORD}{L_COLON}</label><br /><span>{L_PASSWORD_EXPLAIN}</span></dt>
		<dd><input type="password" tabindex="4" name="new_password" id="new_password" size="25" value="{PASSWORD}" class="inputbox autowidth" title="{L_NEW_PASSWORD}" autocomplete="off" /></dd>
	</dl>
	<dl>
		<dt><label for="password_confirm">{L_CONFIRM_PASSWORD}{L_COLON}</label></dt>
		<dd><input type="password"  tabindex="5" name="password_confirm" id="password_confirm" size="25" value="{PASSWORD_CONFIRM}" class="inputbox autowidth" title="{L_CONFIRM_PASSWORD}" autocomplete="off" /></dd>
	</dl>

	<!-- EVENT ucp_register_credentials_after -->
	<hr />

	<!-- EVENT ucp_register_options_before -->
	<dl>
		<dt><label for="lang">{L_LANGUAGE}{L_COLON}</label></dt>
		<dd><select name="lang" id="lang" onchange="change_language(this.value); return false;" tabindex="6" title="{L_LANGUAGE}">{S_LANG_OPTIONS}</select></dd>
	</dl>

	<!-- INCLUDE timezone_option.html -->
    <hr />
    
<form id="ucp" method="post" action="{S_UCP_ACTION}"{S_FORM_ENCTYPE}>

<h2>Upload Your Profile Picture</h2>

<div class="panel">
	<div class="inner">
	
	<fieldset>
			<dl>
			<dt><label>Your Profile Picture:</label><br><span>Size Must Be<br>width: 175 pixels<br>height: 131 pixels</span></dt>
			<dd><img class="avatar" src="{T_THEME_PATH}/images/profile_picture_template.png" alt="User avatar" width="175" height="131"></dd>
		</dl>
	</fieldset>
	<h3>Select your profile picture</h3>
	<fieldset>
		<dl>
			<dt><label>Avatar type:</label></dt>
			<dd><select name="avatar_driver" id="avatar_driver" data-togglable-settings="true">
								<option value="avatar_driver_upload" selected="selected" data-toggle-setting="#avatar_option_avatar_driver_upload">Upload avatar</option>
							</select></dd>
		</dl>
	</fieldset>
	<div id="avatar_options">
	<div id="avatar_option_avatar_driver_upload">
	<noscript>
	<h3 class="avatar_section_header">Upload avatar</h3>
	</noscript>
	<p>Upload your own custom avatar.</p>

	<fieldset>
	<dl>
	<dt><label for="avatar_upload_file">Upload from your machine:</label></dt>
	<dd><input name="MAX_FILE_SIZE" value="0" type="hidden"><input name="avatar_upload_file" id="avatar_upload_file" class="inputbox autowidth" type="file"></dd>
</dl>

	</fieldset>
	</div>
	</div>
	<fieldset class="submit-buttons">
	    {S_HIDDEN_FIELDS}
		<input name="picture_reset" value="{{ lang('RESET') }}" class="button2" type="reset" id="picture_reset"> &nbsp;
		<input name="picture_submit" value="{{ lang('SUBMIT') }}" class="button1" type="submit" id="picture_submit" >
		{S_FORM_TOKEN}
	</fieldset>
	</div>
</div>
</form>

	<!-- EVENT ucp_register_profile_fields_before -->
	<!-- IF .profile_fields -->
		<dl><dd><strong>{L_ITEMS_REQUIRED}</strong></dd></dl>

	<!-- BEGIN profile_fields -->
		<dl>
			<dt><label<!-- IF profile_fields.FIELD_ID --> for="{profile_fields.FIELD_ID}"<!-- ENDIF -->>{profile_fields.LANG_NAME}{L_COLON}<!-- IF profile_fields.S_REQUIRED --> *<!-- ENDIF --></label>
			<!-- IF profile_fields.LANG_EXPLAIN --><br /><span>{profile_fields.LANG_EXPLAIN}</span><!-- ENDIF -->
			<!-- IF profile_fields.ERROR --><br /><span class="error">{profile_fields.ERROR}</span><!-- ENDIF --></dt>
			<dd>{profile_fields.FIELD}</dd>
		</dl>
	<!-- END profile_fields -->
	<!-- ENDIF -->

	<!-- EVENT ucp_register_profile_fields_after -->
	</fieldset>
	</div>
</div>
<!-- IF CAPTCHA_TEMPLATE -->
	<!-- DEFINE $CAPTCHA_TAB_INDEX = 8 -->
	<!-- INCLUDE {CAPTCHA_TEMPLATE} -->
<!-- ENDIF -->

<!-- IF S_COPPA -->
<div class="panel">
	<div class="inner">

	<h4>{L_COPPA_COMPLIANCE}</h4>

	<p>{L_COPPA_EXPLAIN}</p>
	</div>
</div>
<!-- ENDIF -->

<!-- EVENT ucp_register_buttons_before -->

<div class="panel">
	<div class="inner">

	<fieldset class="submit-buttons">
		{S_HIDDEN_FIELDS}
		<input name="reset" value="{L_RESET}" class="button2" type="reset" />&nbsp;
		<input name="submit" tabindex="9" value="{L_SUBMIT}" class="button1 default-submit-action" type="submit" id="submit" />
		{S_FORM_TOKEN}
	</fieldset>

	</div>
</div>
</form>

<!-- INCLUDE overall_footer.html -->
I've been studying the php pages connected to the two original forms, to see how best to add the php side of the script. I'm still looking them over.


/template/ucp_profile_register.html
had
/includes/ucp/ucp_register.php


/template/ucp_profile_avatar.html
had
/includes/ucp/ucp_profile.php


UPDATE: Here is the untouched avatar upload script from
/includes/ucp/ucp_profile.php

Code: Select all

			case 'avatar':

				add_form_key('ucp_avatar');

				$avatars_enabled = false;

				if ($config['allow_avatar'] && $auth->acl_get('u_chgavatar'))
				{
					/* @var $phpbb_avatar_manager \phpbb\avatar\manager */
					$phpbb_avatar_manager = $phpbb_container->get('avatar.manager');
					$avatar_drivers = $phpbb_avatar_manager->get_enabled_drivers();

					// This is normalised data, without the user_ prefix
					$avatar_data = \phpbb\avatar\manager::clean_row($user->data, 'user');

					if ($submit)
					{
						if (check_form_key('ucp_avatar'))
						{
							$driver_name = $phpbb_avatar_manager->clean_driver_name($request->variable('avatar_driver', ''));

							if (in_array($driver_name, $avatar_drivers) && !$request->is_set_post('avatar_delete'))
							{
								$driver = $phpbb_avatar_manager->get_driver($driver_name);
								$result = $driver->process_form($request, $template, $user, $avatar_data, $error);

								if ($result && empty($error))
								{
									// Success! Lets save the result in the database
									$result = array(
										'user_avatar_type' => $driver_name,
										'user_avatar' => $result['avatar'],
										'user_avatar_width' => $result['avatar_width'],
										'user_avatar_height' => $result['avatar_height'],
									);

									/**
									* Trigger events on successfull avatar change
									*
									* @event core.ucp_profile_avatar_sql
									* @var	array	result	Array with data to be stored in DB
									* @since 3.1.11-RC1
									*/
									$vars = array('result');
									extract($phpbb_dispatcher->trigger_event('core.ucp_profile_avatar_sql', compact($vars)));

									$sql = 'UPDATE ' . USERS_TABLE . '
										SET ' . $db->sql_build_array('UPDATE', $result) . '
										WHERE user_id = ' . (int) $user->data['user_id'];
									$db->sql_query($sql);

									meta_refresh(3, $this->u_action);
									$message = $user->lang['PROFILE_UPDATED'] . '<br /><br />' . sprintf($user->lang['RETURN_UCP'], '<a href="' . $this->u_action . '">', '</a>');
									trigger_error($message);
								}
							}
						}
						else
						{
							$error[] = 'FORM_INVALID';
						}
					}

					// Handle deletion of avatars
					if ($request->is_set_post('avatar_delete'))
					{
						if (!confirm_box(true))
						{
							confirm_box(false, $user->lang('CONFIRM_AVATAR_DELETE'), build_hidden_fields(array(
									'avatar_delete'     => true,
									'i'                 => $id,
									'mode'              => $mode))
							);
						}
						else
						{
							$phpbb_avatar_manager->handle_avatar_delete($db, $user, $avatar_data, USERS_TABLE, 'user_');

							meta_refresh(3, $this->u_action);
							$message = $user->lang['PROFILE_UPDATED'] . '<br /><br />' . sprintf($user->lang['RETURN_UCP'], '<a href="' . $this->u_action . '">', '</a>');
							trigger_error($message);
						}
					}

					$selected_driver = $phpbb_avatar_manager->clean_driver_name($request->variable('avatar_driver', $user->data['user_avatar_type']));

					$template->assign_vars(array(
						'AVATAR_MIN_WIDTH'	=> $config['avatar_min_width'],
						'AVATAR_MAX_WIDTH'	=> $config['avatar_max_width'],
						'AVATAR_MIN_HEIGHT'	=> $config['avatar_min_height'],
						'AVATAR_MAX_HEIGHT'	=> $config['avatar_max_height'],
					));

					foreach ($avatar_drivers as $current_driver)
					{
						$driver = $phpbb_avatar_manager->get_driver($current_driver);

						$avatars_enabled = true;
						$template->set_filenames(array(
							'avatar' => $driver->get_template_name(),
						));

						if ($driver->prepare_form($request, $template, $user, $avatar_data, $error))
						{
							$driver_name = $phpbb_avatar_manager->prepare_driver_name($current_driver);
							$driver_upper = strtoupper($driver_name);

							$template->assign_block_vars('avatar_drivers', array(
								'L_TITLE' => $user->lang($driver_upper . '_TITLE'),
								'L_EXPLAIN' => $user->lang($driver_upper . '_EXPLAIN'),

								'DRIVER' => $driver_name,
								'SELECTED' => $current_driver == $selected_driver,
								'OUTPUT' => $template->assign_display('avatar'),
							));
						}
					}

					// Replace "error" strings with their real, localised form
					$error = $phpbb_avatar_manager->localize_errors($user, $error);
				}

				$avatar = phpbb_get_user_avatar($user->data, 'USER_AVATAR', true);

				$template->assign_vars(array(
					'ERROR'			=> (sizeof($error)) ? implode('<br />', $error) : '',
					'AVATAR'		=> $avatar,

					'S_FORM_ENCTYPE'	=> ' enctype="multipart/form-data"',

					'L_AVATAR_EXPLAIN'	=> phpbb_avatar_explanation_string(),

					'S_AVATARS_ENABLED'		=> ($config['allow_avatar'] && $avatars_enabled),
				));

			break;

			case 'autologin_keys':

				add_form_key('ucp_autologin_keys');

				if ($submit)
				{
					$keys = $request->variable('keys', array(''));

					if (!check_form_key('ucp_autologin_keys'))
					{
						$error[] = 'FORM_INVALID';
					}

					if (!sizeof($error))
					{
						if (!empty($keys))
						{
							foreach ($keys as $key => $id)
							{
								$keys[$key] = $db->sql_like_expression($id . $db->get_any_char());
							}
							$sql_where = '(key_id ' . implode(' OR key_id ', $keys) . ')';
							$sql = 'DELETE FROM ' . SESSIONS_KEYS_TABLE . '
								WHERE user_id = ' . (int) $user->data['user_id'] . '
								AND ' . $sql_where ;

							$db->sql_query($sql);

							meta_refresh(3, $this->u_action);
							$message = $user->lang['AUTOLOGIN_SESSION_KEYS_DELETED'] . '<br /><br />' . sprintf($user->lang['RETURN_UCP'], '<a href="' . $this->u_action . '">', '</a>');
							trigger_error($message);
						}
					}

					// Replace "error" strings with their real, localised form
					$error = array_map(array($user, 'lang'), $error);
				}

				$sql = 'SELECT key_id, last_ip, last_login
					FROM ' . SESSIONS_KEYS_TABLE . '
					WHERE user_id = ' . (int) $user->data['user_id'] . '
					ORDER BY last_login ASC';

				$result = $db->sql_query($sql);

				while ($row = $db->sql_fetchrow($result))
				{
					$template->assign_block_vars('sessions', array(
						'KEY' => substr($row['key_id'], 0, 8),
						'IP' => $row['last_ip'],
						'LOGIN_TIME' => $user->format_date($row['last_login']),
					));
				}

				$db->sql_freeresult($result);

			break;
		}

		$template->assign_vars(array(
			'ERROR'		=> (sizeof($error)) ? implode('<br />', $error) : '',

			'L_TITLE'	=> $user->lang['UCP_PROFILE_' . strtoupper($mode)],

			'S_HIDDEN_FIELDS'	=> $s_hidden_fields,
			'S_UCP_ACTION'		=> $this->u_action)
		);

		// Set desired template
		$this->tpl_name = 'ucp_profile_' . $mode;
		$this->page_title = 'UCP_PROFILE_' . strtoupper($mode);
	}
}
Post Reply

Return to “phpBB Custom Coding”