Update Profile information in Laravel User Profile
Use Case Scenario:
A Laravel custom web application users needs to manage their own personal information (pictures, password and other info). We will create a user profile page where users can update their pictures and other information.
This is the 2nd part of our Laravel tutorial to create a custom user profile page from scratch. This will cover updating of of profile picture.
Edit index.blade to add an edit icon inside views/profile/ folder
<div class="row justify-content-center p-2">
<a href="javascript:void(0)" id="upload_pic" class="text-lg text-bold" data-toggle="modal" data-target="#ProfilePicModal">
<i class="fa fa-pencil-alt"></i>
</a>
</div>
Edit index.blade.php in profile folder and Create a modal for update picture
<!--Update Profile Pic Modal -->
<div class="modal fade" id="ProfilePicModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content border-dark">
<div class="modal-header bg-light">
<h2 class="card-title">Update Profile Picture</h2>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-md-6">
<img src="{{asset('/images')}}/{{$userprofile->picture}}" alt="avatar" class="rounded-circle bg-dark img-fluid" style="width: 150px;">
</div>
<div class="col-md-6">
<form id="avatar-form" enctype="multipart/form-data" action="{{route('updatepic')}}" method="POST">
@csrf
<div class="card-body text-center">
<input type="hidden" name="userid" value="{{ $userprofile->user_id }}">
<div class="row pt-3 justify-content-center">
<input id="avatar" type="file" name="avatar" class="form-control-sm text-bg-dark">
</div>
</div>
<div class="card-body py-2 text-center">
<button type="submit" class="btn btn-sm btn-success p-1">Save Picture</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Create a route for image upload in web.php
Route::post('updatepic', [ProfileController::class, 'updatepic'])->name('updatepic');Edit ProfileController and add a new function for fileupload
public function updatepic(Request $request){
if($request->hasFile('avatar')){
$avatar = $request->file('avatar');
$userid = $request['userid'];
$uploadedfile = time() . $avatar->getClientOriginalName();
Image::make($avatar)->resize(300, 300)->save( public_path('images/' . $uploadedfile ) );
$user = Profile::where('user_id','=',$userid)->first();
$user->picture =$uploadedfile;
$user->save();
}
return redirect('profile/index');
}Add Edit link for Profile Info in index.blade.php inside the views/profile folder
<div class="row">
<div class="col-sm-3">
<a href="javascript:void(0)" class="btn btn-sm btn-success" data-toggle="modal" data-target="#proInfoModal"><i class="fa fa-edit"></i> Edit Profile Info</a>
</div>
<div class="col-sm-9"></div>
</div>
Create modal for update info inside profile/index.blade.php
<!--Update Profile Info Modal -->
<div class="modal fade" id="proInfoModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content border-dark">
<div class="modal-header bg-light">
<h2 class="card-title">Update Profile Info</h2>
</div>
<div class="modal-body">
<div class="container">
<form id="info-form" enctype="multipart/form-data" action="{{route('updateinfo')}}" method="POST">
@csrf
<input type="hidden" name="userid" value="{{ $userprofile->user_id }}">
<div class="row ">
<div class="col-sm-4 ">
<p class="mb-0">Mobile Number</p>
</div>
<div class="col-sm-8 pull-right">
<input type="text" class="form-control" name="updmobile" id="updmobile" value="{{$userprofile->mobile}}">
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-4">
<p class="mb-0">Address</p>
</div>
<div class="col-sm-8">
<input type="text" class="form-control" name="updaddress" id="updaddress" value="{{$userprofile->address}}">
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-4">
<p class="mb-0">Status</p>
</div>
<div class="col-sm-5">
<select class="form-control" name="updStatus" id="updStatus">
<option value="{{$userprofile->status}}" selected>{{$userprofile->status}}</option>
<option value="Single">Single</option>
<option value="Married">Married</option>
</select>
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-4">
<p class="mb-0">Company Name</p>
</div>
<div class="col-sm-8">
<input type="text" class="form-control" name="updcompany" id="updcompany" value="{{$userprofile->company}}">
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-4">
<p class="mb-0">Position</p>
</div>
<div class="col-sm-8">
<input type="text" class="form-control" name="updposition" id="updposition" value="{{$userprofile->position}}">
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-8">
<button type="submit" class="btn btn-success">Save Profile Info Update</button>
</div>
<div class="col-sm-4"></div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
Add route for update profile info in routes/web.php
Route::post('updateinfo', [ProfileController::class, 'updateinfo'])->name('updateinfo');Add a new function inside ProfileController to update info
public function updateinfo(Request $request){
$newmobile = $request['updmobile']; $newaddress = $request['updaddress']; $newstatus = $request['updStatus'];
$newcompany = $request['updcompany']; $newposition = $request['updposition']; $userid = $request['userid'];
$userinfo = Profile::where('user_id','=',$userid)->first();
$userinfo->mobile =$newmobile;
$userinfo->address =$newaddress;
$userinfo->status =$newstatus;
$userinfo->company =$newcompany;
$userinfo->position =$newposition;
$userinfo->save();
return redirect('profile/index');
}User Profile Tutorial Series:
Create a User Profile page in Laravel
One thought on “Update Profile information in Laravel User Profile”