Profile page with picture upload for data collection

Greetings to everyone. Want to create a profile page with picture upload, the page will collect data about a payer, then, align right. when submitted, it will display individual information with picture. upload and preview of profile picture is successful, but can’t align the picture to the data collection form properly. the problem is that when picture is uploaded, it will jump away from the submit button and appear at the top left corner of the page. What I want is to have the image appear in a square avatar at the right corner of the form. can someone help me to get it align properly. Thanks in advance.

Hi toniabuokwen welcome to the forum

You described the problem, but unfortunately all I can do is guess.

Don’t use position absolute ???

I’m sure others here will be able to help. But we’ll need to see enough of the HTML and CSS that’s involved.

2 Likes

Thanks for the concern. Am sorry for the omission of sample code in use. Please, see below the code in question.

HTML SECTION

<html>
<head>
<form name="newad" method="post" enctype="multipart/form-data" action="">
<title>Registration</title>
<h1>KUGBUD COMMUNITY </h1>
<h1>TAXPAYER DATABASE MANAGEMENT SYSTEM</h1>
<h1>Online/Offline Solution.</h1>
</head>
<body>
<table>
<img style="margin-left:25px;" src="upload2/avatar.png" width="200" height="200" />
<tr><td><input type="file" name="image" ></td></tr>
<tr><td><input name="Submit" type="submit" value="Upload image"></td></tr>
</table>
</form>
<fieldset>
<h2>Register New Revenue Payer</color></h2>

<label for="ptin">Current TIN Of Business Owner</label>
<input type="text" name="ptin">
</p>
<p>
<label for="fullname">Full Name</label>
<input type="text" name="name"
</p>
<p>
<label for="dob">Date Of Birth</label>
<input type="datetime-local">
</p>
<p>
<label for="address">Residential Address</label>
<input type="textarea" name="address">
</p>
<p>
<label for="full name">Personal Phone Number </label>
<input type="tel" name="tel">
</p>
</fieldset>
<fieldset>
<h2>Business Information</h2>
<p>
<label for="ptin">Current Company TIN </label>
<input type="text" name="ptin">
</p>
<p>
<label for="bname">Business Name</label>
<input type="text" name="bname">
</p>
<label for="full baddress">Address Of Current Business Location </label>
<input type="textarea" name="baddress">
</p>
<p>
<label for="option">Revenue Sector</label>
<select>
<option id="sector">
<option value="edu">Education</option>
<option value="env">Environment</option>
<option value="agric">Agriculture</option>
<option value="tourism">Tourism Beaureu</option>
<option value="tourism">#</option>
<option value="tourism">#</option>
</select>
</p>
<p>
<label for="option">Revenue Lot</label>
<select>
<option id="rlot">
<option value="l1">Lot 1</option>
<option value="l2">Lot 2</option>
<option value="l3">Lot 3</option>
<option value="l4">Lot 4</option>
<option value="l4">Lot #</option>
<option value="l4">Lot #</option>
</select>
</fieldset>
<button type="submit">Add Payer</button>
</form>

THE CSS SECTION

<style type="text/css">
form h1 {
color: white;
text-align: center;
}
form {
font-size: 22px;
color: white;
}
input {
display: block;
clear: both;
}
fieldset {
margin: 1em 180;
background-color: pink;
}
label input {
display: block;
color: red;
}
body {
background: blue;
}
</style>

Thanks

Off Topic

@toniabuokwen: when you post code here, you need to format it so that it will display correctly.

You can highlight your code, then use the </> button in the editor window, which will format it, or you can place three backticks ``` (top left key on US/UK keyboards) on a line before your code, and three on a line after your code. I find this approach easier, but unfortunately some European and other keyboards don’t have that character.

Try validating your html.
You can’t have an <img> as a direct descendant of a <table>.
In fact, I’m not sure why you even have the table element in there.

Indeed. You have half your form in the <head> section of your page, rather than in the <body>.

1 Like

Ok! Let me check it up.

Yes, the table is not necessary in there, confirmed.

When you post code, it would be ideal if it is in the form of a “working page” - starts with a doctype, includes the head information and CSS, body code, and ends with close html.

If it works on your computer, it should work on ours. If we have to assemble parts to figure out what you are talking about, there are many opportunities for errors.

Try posting a “working page” that will allow us to see what you see.

The simplest method is to just float the image.

form img {
   float: right;
}

But you still need to sort out the validation errors in the html.

THE PHP CODE

<?php
//define a maxim size for the uploaded images
define ("MAX_SIZE","400");
// define the width and height for the thumbnail
// note that theese dimmensions are considered the maximum dimmension and are not fixed,
// because we have to keep the image ratio intact or it will be deformed
define ("WIDTH","150");
define ("HEIGHT","100");

// this is the function that will create the thumbnail image from the uploaded image
// the resize will be done considering the width and height defined, but without deforming the image
function make_thumb($img_name,$filename,$new_w,$new_h)
{
//get image extension.
$ext=getExtension($img_name);
//creates the new image using the appropriate function from gd library
if(!strcmp("jpg",$ext) || !strcmp("jpeg",$ext))
$src_img=imagecreatefromjpeg($img_name);

if(!strcmp("png",$ext))
$src_img=imagecreatefrompng($img_name);

//gets the dimmensions of the image
$old_x=imageSX($src_img);
$old_y=imageSY($src_img);

// next we will calculate the new dimmensions for the thumbnail image
// the next steps will be taken:
// 1. calculate the ratio by dividing the old dimmensions with the new ones
// 2. if the ratio for the width is higher, the width will remain the one define in WIDTH variable
// and the height will be calculated so the image ratio will not change
// 3. otherwise we will use the height ratio for the image
// as a result, only one of the dimmensions will be from the fixed ones
$ratio1=$old_x/$new_w;
$ratio2=$old_y/$new_h;
if($ratio1>$ratio2) {
$thumb_w=$new_w;
$thumb_h=$old_y/$ratio1;
}
else {
$thumb_h=$new_h;
$thumb_w=$old_x/$ratio2;
}

// we create a new image with the new dimmensions
$dst_img=ImageCreateTrueColor($thumb_w,$thumb_h);

// resize the big image to the new created one
imagecopyresampled($dst_img,$src_img,0,0,0,0,$thumb_w,$thumb_h,$old_x,$old_y);

// output the created image to the file. Now we will have the thumbnail into the file named by $filename
if(!strcmp("png",$ext))
imagepng($dst_img,$filename);
else
imagejpeg($dst_img,$filename);

//destroys source and destination images.
imagedestroy($dst_img);
imagedestroy($src_img);
}

// This function reads the extension of the file.
// It is used to determine if the file is an image by checking the extension.
function getExtension($str) {
$i = strrpos($str,".");
if (!$i) { return ""; }
$l = strlen($str) - $i;
$ext = substr($str,$i+1,$l);
return $ext;
}

// This variable is used as a flag. The value is initialized with 0 (meaning no error found)
//and it will be changed to 1 if an errro occures. If the error occures the file will not be uploaded.
$errors=0;
// checks if the form has been submitted
if(isset($_POST['Submit'] ))
{
//reads the name of the file the user submitted for uploading
$image=$_FILES['image']['name'];
// if it is not empty
if ($image)
{
// get the original name of the file from the clients machine
$filename = stripslashes($_FILES['image']['name']);

// get the extension of the file in a lower case format
$extension = getExtension($filename);
$extension = strtolower($extension);
// if it is not a known extension, we will suppose it is an error, print an error message
//and will not upload the file, otherwise we continue
if (($extension != "jpg") && ($extension != "jpeg") && ($extension != "png"))
{
echo '<h1>Unknown extension!</h1>';
$errors=1;
}
else
{
// get the size of the image in bytes
// $_FILES[\'image\'][\'tmp_name\'] is the temporary filename of the file in which the uploaded file was stored on the server
$size=getimagesize($_FILES['image']['tmp_name']);
$sizekb=filesize($_FILES['image']['tmp_name']);

//compare the size with the maxim size we defined and print error if bigger
if ($sizekb > MAX_SIZE*1024)
{
echo '<h1>You have exceeded the size limit!</h1>';
$errors=1;
}

//we will give an unique name, for example the time in unix time format
$image_name=time().'.'.$extension;
//the new name will be containing the full path where will be stored (images folder)
$newname="images/".$image_name;
$copied = copy($_FILES['image']['tmp_name'], $newname);
//we verify if the image has been uploaded, and print error instead
if (!$copied)
{
echo '<h1>Copy unsuccessfull!</h1>';
$errors=1;
}
else
{
// the new thumbnail image will be placed in images/thumbs/ folder
$thumb_name='images/thumbs/thumb_'.$image_name;
// call the function that will create the thumbnail. The function will get as parameters
//the image name, the thumbnail name and the width and height desired for the thumbnail
$thumb=make_thumb($newname,$thumb_name,WIDTH,HEIGHT);

}} }}

//If no errors registred, print the success message and show the thumbnail image created
if(isset($_POST['Submit']) && !$errors)
{
echo "<h1>Thumbnail created Successfully! </h1>";
echo '<img src="'.$thumb_name.'">';
echo "$newname";
}

// chech if the form is submitted
/*if (isset($_POST['submit'])
$tin=$_POST["tin"];
// chech if the form data is entered, otherwise, pass error messages	
if(!isset($POST["tin"])
{
	$err
	echo "entere your the TaxPayer TIN";
}*/
?>

Yes, thanks. I have uploaded the necessary codes. The code snippet sent by you could only move the square image to the right excluding the submit & upload buttons. When image is uploaded, it jumps over to the top most left corner of the page. I want it placed into the square shape with the submit & upload buttons underneath the shape.Regards.

I’m not exactly sure the layout you want, is it something like this?

1 Like

yes, that is the layout except that the image will be within the fieldset such that when form data is submitted, the view page on a different browser tab will display the form of each individual with the profile image. I appreciate your good job. cheers.

It’s simple enough to move the image inside of the fieldset.

Yes, you have got the layout, but the actual problem is yet to be solved. Please, see that the uploaded image does not appear inside the avatar at the current position. When uploaded, it will jump over to the top-left corner of the page. I need the uploaded image to set exactly at the position as displayed by your demo on screen. Cheers.

I’m not sure I understand.
Presumably the image will have some placeholder image before upload, which is then substituted after upload, via the back-end processing. I don’t see how that should alter the layout.

I’m a little unclear as to what has not been solved, @toniabuokwen. Are you saying that when you try to use @SamA74’s code in your page, it doesn’t behave as expected? If so, you need to show us the full HTML & CSS code you are using so we can see where the problem lies.

well, this is not actually the back-end upload. The user has to fill this form at the front-end, submit at the front-end. There is the placeholder, but the image, when uploaded does not incident at the placeholder but at the top-left corner of the

page. the oil bottle shown is the sample position of the output when image is uploaded. Thanks for your support.

So why/how are you placing the uploaded image there, instead of in place of the placeholder? :confused: