CODEWITHSUNDEEP
javascriptphpjqueryhtml
user6822927
user6822927

Reputation:

Change user profile picture Javascript , PHP, HTML

I am creating a social network that gives the user the option to change their profile picture or keep it the same(default) . I asked a question about this and got an answer that helped me save the picture into my uploads folder but not how to change the user's profile photo .

The user will click the choose file button and then when the choose the file they will click the button that says change profile picture . When they do all of that I want the default picture to change to the picture that the user selected . Can someone please help me ?

profile.php :

<form id="form2" action="upload.php" method="post" enctype="multipart/form-data">
<p id="p1">Change profile picture:</p> <br />
<input type="file" name="fileToUpload" id="fileToUpload"><br />
<br><input id="sub1" type="submit" value="Change profile picture" name="submit"><br />
</form>

<!-- Trigger the Modal -->
<img id="myImg" src="default.png" width="200" height="150">

<!-- The Modal -->
<div id="myModal" class="modal">

<!-- The Close Button -->
<span class="close" onclick="document.getElementById('myModal').style.display='none'">&times;</span>

<!-- Modal Content (The Image) -->
<img class="modal-content" id="img01">

 <!-- Modal Caption (Image Text) -->
<div id="caption"></div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() { 
modal.style.display = "none";
}
</script>

UPDATE !!

I've updated my code to save the image and then have it saved in the database but all this code is doing is saving it in my image folder and not saving it in my database . Please help me.

upload.php:

ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

include("connect.php"); 
include("auth_login.php"); 

$target_dir = "images/uploads/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);

// Check if image file is a actual image or fake image

if(isset($_POST["change"])) {
move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file);

$q = mysqli_query ($conn, "UPDATE users SET userPic = '".$_FILES['fileToUpload']
['name']."' WHERE username = '" . $username . "'");

if($check !== false) {
echo "File saved - " . $check["mime"] . ".";
$uploadOk = 1;

} else {
echo "File is not an image.";
$uploadOk = 0;
}
}

Upvotes: 1

Views: 5248

Answers (3)

Bluebaron
Bluebaron

Reputation: 2516

Probably the best way to approach this is to hash the files and store the hash in a database, and then save the files with the hash as the name.

This way you can just create every user like

insert into user (username, photo) values ('me', 'default_photo_hash')

and then when the user updates his photo, you hash the new photo, save it, and

update user (photo) values ('new_photo_hash') where username='me'

Upvotes: 0

paskalnikita
paskalnikita

Reputation: 161

I have smt like that on my own blog(it is php code! i have some problem with printing it on page):

   if(isset($_FILES['profile']) === true){
	if(empty($_FILES['profile']['name']) === true){
	echo "<div class='img-file-error'>Please choose a file!</div>";
	}else{
	$allowed = array('jpg', 'jpeg', 'gif', 'png');
	$file_name = $_FILES['profile']['name'];
	$file_extn = strtolower(end(explode('.', $file_name)));
	$file_temp = $_FILES['profile']['tmp_name'];
	if(in_array($file_extn, $allowed) === true){
	change_profile_image($session_user_id, $file_temp, $file_extn);
header('Location: settings');
	exit();
	}else{
	echo "<div class='img-file-error'>Incorrect file type!<br>
	Allowed types: ";
	echo implode(', ',$allowed);
	echo ".</div>";
	}
	}
	}
	if(!empty($user_data['profile'])){
	echo '<img id="previewImg" class="img-settings" width="250px" src="', $user_data['profile'], '" alt="',$user_data['first_name'],'\'s profile image">';
	}

And js file:

function onFileSelect(e){
		var f = e.target.files[0];
		if(f.type.match(/image.*/)){
			var reader = new FileReader;
			place = document.getElementById("previewImg");
			reader.readAsDataURL(f);
			reader.onload = function(e){ 
				place.src = e.target.result;
			}
		}
		else {
				alert('You can chose only pictures');
			};
	};
	if(window.File && window.FileReader && window.FileList && window.Blob){
		document.querySelector("input[type=file]").addEventListener("change", onFileSelect, false);
	}else{
		console.warn( "Your browser does not support FileAPI");
	};

Upvotes: 0

Chris Hawkes
Chris Hawkes

Reputation: 12410

I'm not sure I can answer your specific PHP question but it sounds like this is more of an architecture question you're posing as opposed to an actual question like why isn't this working.

I would suggest you have a auth table which keeps track of all of your users data such as username, email, profile_photo etc... Your profile_photo should be a string file path that points to the image that they are using. By simply removing the old image and pointing to the new image you could solve this problem and you could keep your file system slim. Another option is to give the ability for profile_photo to store multiple file path locations for each image they've uploaded.

Upvotes: 1

Related Questions