How to upload Profile Images to Users using Laravel 6?

Today, We want to share with you How to upload Profile Images to Users using Laravel 6?.In this post we will show you Upload profile picture using Laravel 6, hear for Live Image Upload using jQuery, PHP Laravel 6 and MySQL we will give you demo and example for implement.In this post, we will learn about Image preview and upload using PHP Laravel 6 and MySQL database with an example.

How to upload Profile Images to Users using Laravel 6?

There are the Following The simple About Upload Profile Picture in Laravel 6 Registration Full Information With Example and source code.

As I will cover this Post with live Working example to develop Laravel Avatar Image Upload Tutorial With Example, so the Upload user profile image and save to data base – PHP Laravel 6 MYSQLI is used for this example is following below.

Laravel Send Emails Mailgun setup Tutorial

How to upload profile picture Avatar in Laravel?

Open create_users_table.php

$table->string('profiledp')->default('member.jpg');


public function up()
{
    Schema::create('users', function (Blueprint $table) {
        $table->increments('id');
        $table->string('name');
        $table->string('email')->unique();
        $table->string('password');
        $table->string('profiledp')->default('member.jpg');
        $table->rememberToken();
        $table->timestamps();
    });
}

Setup User Profile Page

resources > views > layouts > app.blade.php

<div class="dropdown-menu" aria-labelledby="navbarDropdown">
    <a class="dropdown-item" href="/myaccount">
        User Profile
    </a>
    <a class="dropdown-item" href="{{ route('logout') }}"
       onclick="event.preventDefault();
                     document.getElementById('logout-form').submit();">
        {{ __('Logout') }}
    </a>

    <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
        @csrf
    </form>
</div>

Handle Profile Picture Upload Request

routes > web.php

Route::get('myaccount', '[email protected]');
Route::post('myaccount', '[email protected]_profiledp');

ProfileController.php

public function myaccount()
{
    $user = Auth::user();
    return view('myaccount',compact('user',$user));
}

public function update_profiledp(Request $request){

    $request->validate([
        'profiledp' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
    ]);

    $user = Auth::user();

    $profiledpName = $user->id.'_profiledp'.time().'.'.request()->profiledp->getClientOriginalExtension();

    $request->profiledp->storeAs('profiledps',$profiledpName);

    $user->profiledp = $profiledpName;
    $user->save();

    return back()
        ->with('success','You have successfully upload image.');

}

resources > views > myaccount.blade.php

@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row">
            @if ($message = Session::get('success'))

                <div class="alert alert-success alert-block">

                    <button type="button" class="close" data-dismiss="alert">×</button>

                    <strong>{{ $message }}</strong>

                </div>

            @endif

            @if (count($errors) > 0)
                <div class="alert alert-danger">
                    <strong>Whoops!</strong> There were some problems with your input.<br><br>
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
        </div>
        <div class="row justify-content-center">

            <div class="myaccount-header-container">
                <div class="myaccount-header-img">
                    <img class="rounded-circle" src="/storage/profiledps/{{ $user->profiledp }}" />
                    <!-- badge -->
                    <div class="rank-label-container">
                        <span class="label label-default rank-label">{{$user->name}}</span>
                    </div>
                </div>
            </div>

        </div>
        <div class="row justify-content-center">
            <form action="/myaccount" method="post" enctype="multipart/form-data">
                @csrf
                <div class="form-group">
                    <input type="file" class="form-control-file" name="profiledp" id="profiledpFile" aria-describedby="fileHelp">
                    <small id="fileHelp" class="form-text text-muted">Please upload a valid image file. Size of image should not be more than 2MB.</small>
                </div>
                <button type="submit" class="btn btn-primary">Submit</button>
            </form>
        </div>
    </div>
@endsection

Web Programming Tutorials Example with Demo

Read :

Generate UUID in laravel 5.8 Example

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about Laravel Avatar Image Upload Tutorial With Example.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.