Laravel User Image

In this video we will teach you how to add a user profile image along with the built-in authentication provided by Laravel. You can checkout the repo here: https://github.com/thedevdojo/laravel-user-image.

Below are the steps we used to add the profile image to our laravel app. You will need to have a new laravel app up and ready to go, then follow these steps.

1. Run the Artisan Make auth command

php artisan make:auth

2. Add the avatar field to the 'create_users_table' migration file so the file looks like the following:

<?php

use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateUsersTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('users', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->string('email')->unique();
            $table->string('avatar')->default('default.jpg');
            $table->string('password');
            $table->rememberToken();
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::drop('users');
    }
}

3. Edit your .env file and add the correct database credentials

4. Run the Artisan migrate command

php artisan migrate

5. Add the Profile button to the resources/views/layouts/app.blade.php file:

<ul class="dropdown-menu" role="menu">
    <li><a href="{{ url('/profile') }}"><i class="fa fa-btn fa-user"></i>Profile</a></li>
    <li><a href="{{ url('/logout') }}"><i class="fa fa-btn fa-sign-out"></i>Logout</a></li>
</ul>

6. Add the 'profile' GET route to app/Http/routes.php file:

Route::get('profile', 'UserController@profile');

7. Create the UserController and add the profile method:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Http\Requests;
use Auth;
use Image;

class UserController extends Controller
{
    //
    public function profile(){
    	return view('profile', array('user' => Auth::user()) );
    }
}

8. Create the profile.blade.php located at resources/views/profile.blade.php:

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <img src="/uploads/avatars/{{ $user->avatar }}" style="width:150px; height:150px; float:left; border-radius:50%; margin-right:25px;">
            <h2>{{ $user->name }}'s Profile</h2>
            <form enctype="multipart/form-data" action="/profile" method="POST">
                <label>Update Profile Image</label>
                <input type="file" name="avatar">
                <input type="hidden" name="_token" value="{{ csrf_token() }}">
                <input type="submit" class="pull-right btn btn-sm btn-primary">
            </form>
        </div>
    </div>
</div>
@endsection

9. Create the profile post route to app/Http/routes.php:

Route::post('profile', 'UserController@update_avatar');

10. Install Image Intervention Package: http://image.intervention.io/

11. Add the update_avatar method to the UserController so that way the UserController finally looks like the following:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Http\Requests;
use Auth;
use Image;

class UserController extends Controller
{
    //
    public function profile(){
    	return view('profile', array('user' => Auth::user()) );
    }

    public function update_avatar(Request $request){

    	// Handle the user upload of avatar
    	if($request->hasFile('avatar')){
    		$avatar = $request->file('avatar');
    		$filename = time() . '.' . $avatar->getClientOriginalExtension();
    		Image::make($avatar)->resize(300, 300)->save( public_path('/uploads/avatars/' . $filename ) );

    		$user = Auth::user();
    		$user->avatar = $filename;
    		$user->save();
    	}

    	return view('profile', array('user' => Auth::user()) );

    }
}

12. Add the user image to the top navigation with the following code inside of resources/views/layouts/app.blade.php:

<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" style="position:relative; padding-left:50px;">
    <img src="/uploads/avatars/{{ Auth::user()->avatar }}" style="width:32px; height:32px; position:absolute; top:10px; left:10px; border-radius:50%">
    {{ Auth::user()->name }} <span class="caret"></span>
</a>

And that's it!

Hope you found this video helpful!