How to upload a profile picture and store it on the databse up on updating user profile information. Note: users can only upload and update their profile pictures once they have registered an account and have logged in.

Question

Controller code

[Authorize]  
[HttpGet]  
public ActionResult Details()  
{            
var currentUser = getUserRecord();       

if (currentUser == null)      
{          
	return HttpNotFound();     
 }       

	return View(currentUser); 
}    

[HttpPost]  
[Authorize]  
public ActionResult Details(UpdateProfileMV updatedUser, HttpPostedFileBase Base64ProfilePic)  
{      

	if (ModelState.IsValid)      
		{                    
			var existingUser = getUserRecord();           
			
			if (existingUser != null)          
			{              
			existingUser.fName = updatedUser.fName;              						 			
			existingUser.lName = updatedUser.lName;              			
			existingUser.email_Address = updatedUser.email_Address;              
			existingUser.biography = updatedUser.biography;                             


	if (!string.IsNullOrWhiteSpace(updatedUser.password) && updatedUser.password != existingUser.password)              

	{  
		existingUser.password = updatedUser.password;              
	}               

		if (Base64ProfilePic != null)              {                  			
	string fileName = Path.GetFileName(Base64ProfilePic.FileName);                   
	using (BinaryReader reader = new BinaryReader(Base64ProfilePic.InputStream))                  
	{                      
		byte[] imageBytes =	reader.ReadBytes(Base64ProfilePic.ContentLength);                      existingUser.Base64ProfilePic = Convert.ToBase64String(imageBytes);                  				
	}              
}               
db.Entry(existingUser).State = EntityState.Modified;              	
db.SaveChanges();               

TempData["UpdateSuccess"] = "Profile updated successfully.";          
}           
	return RedirectToAction("Details");      

	}         

	return View(updatedUser);  
}

Answer 1

Hi @Manyoni, Sandile, (Mr) (s220521409)

According to your code, you want to store images via base64.

Submit an image via a form on the View page:

<form action="/Home/Uploading" method="post" enctype="multipart/form-data">
    <input type="file" name="imageFile" accept="image/*"  />
    <input type="submit" value="submit" />
</form>

Reads a byte array of picture files

byte[] imageBytes = new byte[imageFile.ContentLength];
imageFile.InputStream.Read(imageBytes, 0, imageFile.ContentLength);

Converts a byte array to a base64 string

   string Base64ProfilePic = Convert.ToBase64String(imageBytes);

This gets your Base64ProfilePic. Then you can manipulate it through the database.

When you want to display the image, you can do so as follows.

<img src="data:image/png;base64,"+Base64ProfilePic alt="Image" />

If you have problems with the database and authentication, please continue to leave me a message. I will continue to help you solve the problem.

Best regards,
Qi You

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.