More

How to update profile image in Laravel using Ajax

In this tutorial we will learn how to update profile image in laravel using ajax.


Step 1 – Install Laravel via composer. 

In the first step , we need to install the Laravel 8 project via composer. 

Simply run below command in your cmd terminal – 

composer create-project laravel/laravel laravel-ajax 

After installation, go to your project directory using the below command . 

cd laravel-ajax 

Now your Laravel 8 project is fully installed on your system .  

Step 2- Create routes 

Now we need to create routes in web.php file 

laravel-ajax\routes\web.php 

use App\Http\Controllers\UserController;

use Illuminate\Support\Facades\Route; 

/*

|--------------------------------------------------------------------------

| Web Routes

|--------------------------------------------------------------------------

|

| Here is where you can register web routes for your application. These

| routes are loaded by the RouteServiceProvider within a group which

| contains the "web" middleware group. Now create something great!

|

*/ 

Route::get('/',[UserController::class,'index'])->name('index');

Route::post('add-user',[UserController::class,'add_user'])->name('add-user');

Route::post('update-image',[UserController::class,'update_image'])->name('update-image');


Step 3 – Create Model

In this step, create User model. 

Run this below command in your terminal.

php artisan make:model User


 laravel-ajax\app\Models\User.php

<?php

 

namespace App\Models;

 

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Database\Eloquent\Model;

 

class User extends Model

{

    use HasFactory;

 

    protected $fillable = [

        'name',

        'email',

        'profile',

        'password',

    ]; 

}


Step 4- Make controller 

You need to create a controller using the below command in cmd. 

php artisan make:controller UserController

 

laravel-ajax\ app\ Http\ Controllers\ UserController.php

<?php 

namespace App\Http\Controllers; 

use App\Models\User;

use Illuminate\Http\Request; 

class UserController extends Controller

{ 

    public function index(){

        $users = User::all();

        return view('index',compact('users'));

    } 

    public function add_user(Request $request){

        $img_name = 'img_'.time().'.'.$request->profile->getClientOriginalExtension();

        $request->profile->move(public_path('img/'), $img_name);

        $imagePath = 'img/'.$img_name; 

        $data = [

            'name'=>$request->name,

            'profile'=>$imagePath,

            'email'=>$request->email,

            'password'=>$request->password,

        ]; 

        $add = User::create($data); 

        if($add){

            $response['success'] = true;

            $response['message'] = 'Success! Record Added Successfully.';

        }else{

            $response['success'] = false;

            $response['message'] = 'Error! Record Not Added.';

        }

        return $response; 

    } 

    public function update_image(Request $request){

        $img_name = 'img_'.time().'.'.$request->profile->getClientOriginalExtension();

        $request->profile->move(public_path('img/'), $img_name);

        $imagePath = 'img/'.$img_name;

 

        $data = [

            'profile'=>$imagePath,

        ]; 

        $update = User::find($request->user_id)->update($data); 

        if($update){

            $response['success'] = true;

            $response['message'] = 'Success! Record Updated Successfully.';

        }else{

            $response['success'] = false;

            $response['message'] = 'Error! Record Not Updated.';

        }

        return $response;

    }

}


Step 5- Create blade file

In this step create index.blade.php file


laravel-ajax\ resources\ views\ index.blade.php

<!doctype html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <meta name="csrf-token" content="{{ csrf_token() }}">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">    <title>Laravel-ajax</title>

    <style>

        body{

            backgroundrgb(174182255);

        }

        .profileImg img{

            height150px;

            max-width200px;

 

        }

    </style>

  </head>

  <body>

 

    <div class="container mt-5 bg-white pb-3">

        <div class="row bg-white">

            <div class="col px-4 py-3">

                <div class="row">

                    <div class="col-md-9">

                        <h3 class="">Laravel-Ajax Image Upload Example</h3>

                    </div>

                    <div class="col-md-3 ">

                        <button class="btn btn-success float-md-right" data-toggle="modal" data-target="#exampleModalCenter">Add New User</button>

                    </div>

                </div>

            <hr>

            </div>

        </div>

        <div class="">

            <div class="alert alert-danger" role="alert" id="failedMessage" style="display: none"></div>

            <div class="alert alert-success" role="alert" id="successMessage" style="display: none"></div>

        </div>

        <div class="row pr-md-5">

            @if (count($users) > 0)

            <div class="col-md-4">

              <div class="list-group" id="list-tab" role="tablist">

                  @foreach ($users as $key=>$user)

                    <a class="list-group-item list-group-item-action {{ $key ? '':'active' }}" id="list-{{ $key }}-list" data-toggle="list" href="#list-{{ $key }}" user_id="{{ $user->id }}" role="tab" aria-controls="{{ $key }}">{{ $user->name }}</a>

                  @endforeach

              </div>

            </div>

            <div class="col-md-8">

              <div class="tab-content" id="nav-tabContent">

                  @foreach ($users as $key=>$user)

                  <div class="tab-pane fade show {{$key ? '':'active'}}" id="list-{{ $key }}" role="tabpanel" aria-labelledby="list-{{ $key }}-list">

                    <div class="">

                        <h5>User Detail</h5>

                        <hr>

                        <div class="row">

                            <div class="col-md-4">

                                <div class="profileImg ">

                                    <img class="border p-2" src="{{ asset($user->profile}}" alt="profile image">

                                    <input type="file"  id="updateImage" hidden>

                                    <br>

                                    <button class="btn btn-primary mt-3"><label for="updateImage">Update Image</label></button>

                                </div>

                            </div>

                            <div class="col-md-8">

                                <label for="">Full Name :</label><br>

                                <input type="text" class="form-control" disabled value="{{ $user->name }}" >

                                <label for="">Email Address :</label><br>

                                <input type="text" class="form-control" disabled value="{{ $user->email }}" >

                                <label for="">Password :</label><br>

                                <input type="text" class="form-control" disabled value="{{ $user->password }}" >

                            </div>

                        </div>

                    </div>

                  </div>

                  @endforeach

              </div>

            </div>

            @else

                <div class="col">

                    <p class="text-center">Oops! Record Not Found.</p>

                </div>

            @endif

        </div>

    </div>

 

 

    <!-- Modal -->

    <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">

        <div class="modal-dialog modal-dialog-centered" role="document">

        <div class="modal-content">

            <div class="modal-header">

            <h5 class="modal-title" id="exampleModalLongTitle">Enter User Detail</h5>

            <button type="button" class="close" data-dismiss="modal" aria-label="Close">

                <span aria-hidden="true">&times;</span>

            </button>

            </div>

            <div class="modal-body">

                <form method="POST" id="addNewUser" enctype="multipart/form-data">

                    @csrf

                    <div class="form-group">

                        <label for="fullname">Full Name</label>

                        <input type="text" class="form-control" name="" id="fullname" placeholder="Enter full name">

                      </div>

                    <div class="form-group">

                      <label for="email">Email address</label>

                      <input type="email" name="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter email">

                    </div>

                    <div class="form-group">

                      <label for="password">Password</label>

                      <input type="password" name="password" class="form-control" id="password" placeholder="Password">

                    </div>

                    <div class="form-group">

                        <label for="file">Example file input</label>

                        <input type="file" name="profile" accept="image/*" class="form-control-file" id="file">

                    </div>

                    <button type="submit" class="btn btn-primary">Submit</button>

                </form>

            </div>

            <div class="modal-footer">

            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

            </div>

        </div>

        </div>

    </div>

    @php

        if(count($users) > 0){

            $user_id = $users[0]->id;

        }else{

            $user_id = '';

        }

    @endphp

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js" ></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

 

    <script>

        $(document).ready(function(){

            $.ajaxSetup({

                headers: {

                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')

                }

            });

        });

 

        let profile ;

        const user_id = "{{ $user_id }}";

 

        $('#file').change(function(e){

         profile = e.target.files[0];

        })

        $('#updateImage').change(function(e){

            profile = e.target.files[0];

            var formDatanew FormData();

            formData.append('profile' , profile);

            formData.append('user_id' , user_id);

            $.ajax({

                cache: false,

                contentType: false,

                processData: false,

                type:'post',

                data:formData,

                url:"{{ route('update-image') }}",

                success:function(response){

                    if(response.success){

                        $('#successMessage').show();

                        $('#successMessage').text(response.message);

                    }else{

                        $('#failedMessage').show();

                        $('#failedMessage').text(response.message);

                    }

                    setTimeout(() => {

                        location.reload();

                    }, 2000);

                }

            });

 

        });

 

        $('#addNewUser').submit(function(e){

            e.preventDefault();

            var name$('#fullname').val();

            var email$('#email').val();

            var password$('#password').val();

 

            var formDatanew FormData();

            formData.append('profile' , profile);

            formData.append('name' , name);

            formData.append('email' , email);

            formData.append('password' , password);

 

            $.ajax({

                cache: false,

                contentType: false,

                processData: false,

                type:'post',

                data:formData,

                url:"{{ route('add-user') }}",

                success:function(response){

                    $('#exampleModalCenter').modal('hide');

                    if(response.success){

                        $('#successMessage').show();

                        $('#successMessage').text(response.message);

                    }else{

                        $('#failedMessage').show();

                        $('#failedMessage').text(response.message);

                    }

                    setTimeout(() => {

                        location.reload();

                    }, 2000);

                }

            });

        })

        $('.list-group-item-action').click(function(){

            user_id =  $(this).attr('user_id');

        });

    </script> 

  </body>

</html>


Step 6- Create users table  

In this step you can create a users table using migration or directly from your database. 



Here is the schema for the users migration table .

Schema::create('users'function (Blueprint $table) {

            $table->id();

            $table->string('name');

            $table->string('email')->unique();

            $table->string('profile')->nullable();

            $table->string('password');

            $table->timestamps();

        });


Step 7 – Run php artisan serve

image

 

Output-

image


image

 

image

 

Related Topics

×

TOP TOPICS

Road map for web development 2022 What is git and git hub How to create a Google logo using HTML and CSS What is .htaccess file and how to use it Most important HTML5 interview questions PHP CRUD operations How to send mail using PHP Insert and fetch image using PHP How to dowload pdf using PHP How to export data in Excel using Laravel Import excel data in database using laravel How to send mail in Laravel 8 Laravel 8 CRUD Operation Laravel 8 Image Upload and Fetch Tutorial Example Laravel 8 CRUD operation using DB Laravel 8 CRUD Operation using resource controller Date Validations Using jquery Datepicker How to reset or clear a form using JavaScript Form validation in Laravel 8 How to download pdf file using Laravel 8 dompdf How to Toggle Password Visibility Using JavaScript PHP CRUD Operation Using Ajax and Jquery Get Yesterday and Tomorrow Date in PHP How to disable text selection using CSS and Jquery How to Get Previous Month and Next month date from Date in PHP Laravel CRUD Operation Using Ajax and Jquery How to find numbers from string in PHP How to Convert String Date to Date Format in PHP How to calculate age from dob column using mysql Rotate image using JQuery animate() method Allow Only Numbers in a Text Box using jQuery How To connect SSH using PHP? Radio buttons value using GET method in PHP How to get X and Y position on click event using jQuery Delete Confirmation Message using JavaScript Select2 DropDown With Validation using Bootstrap 4 How to Zoom an Image on Mouse Hover using CSS How to Remove First Element from Array in PHP How to Remove Last Element from Array in PHP E-Signature Pad using jQuery, Ajax and PHP PHP Contact Form with Google reCAPTCHA How to update profile image in Laravel using Ajax How to get X and Y position of an element using jQuery How to disable a anchor tag in HTML using CSS, JS and jQuery check if atleast one checkbox is checked or not using jQuery How can we count number of rows in a table using jQuery How can we count child elements inside a div using jQuery How to use radio button on change event in jQuery How to get checked radio button value by name using jQuery How to count the number of character in a string using jQuery How to add modal popup in PHP using jQuery?