Laravel 11 CRUD with upload image
Download Laravel App
https://laravel.com/docs/11.x/installation
composer global require laravel/installer
C:\xampp\htdocs\laravel11\myapp>composer global require laravel/installer
Connecting our Database
open .env file root directory.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=8889
DB_DATABASE=laravel11dev
DB_USERNAME=root
DB_PASSWORD=root
run this migration
C:\xampp\htdocs\laravel\laravel11\myapp>php artisan migrate
add photo to users table
php artisan make:migration add_photo_to_users_table --table=users
Update migration file
database/migrations/add_photo_to_users_table.php
public function up()
{
Schema::table('users', function (Blueprint $table) {
$table->string('photo')->nullable()->after('email');
});
}
run this migration
C:\xampp\htdocs\laravel\laravel11\myapp>php artisan migrate
update User Model add photo field as $fillable in User model.
protected $fillable = [
'name',
'email',
'password',
'photo',
];
Create Controller
php artisan make:controller UserController -r
C:\xampp\htdocs\laravel\laravel10project>php artisan make:controller UserController -r
app\Http\Controllers\UserController.php
//app\Http\Controllers\UserController.php<
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\User;
use Illuminate\Support\Facades\Session;
use Illuminate\Support\Facades\File;
class UserController extends Controller
{
/**
* Display a listing of the resource.
*/
public function index()
{
$users = User::latest('id')->get();
return view('admin.index', compact('users'));
}
/**
* Show the form for creating a new resource.
*/
public function create()
{
$title = "Add New User";
return view('admin.add_edit_user', compact('title'));
}
/**
* Store a newly created resource in storage.
*/
public function store(Request $request)
{
$request->validate(
[
'name' => 'required',
'email' => 'required|email|unique:users',
'photo' => 'mimes:png,jpeg,jpg|max:2048',
]
);
$filePath = public_path('uploads');
$insert = new User();
$insert->name = $request->name;
$insert->email = $request->email;
$insert->password = bcrypt('password');
if ($request->hasfile('photo')) {
$file = $request->file('photo');
$file_name = time() . $file->getClientOriginalName();
$file->move($filePath, $file_name);
$insert->photo = $file_name;
}
$result = $insert->save();
Session::flash('success', 'User registered successfully');
return redirect()->route('user.index');
}
/**
* Display the specified resource.
*/
public function show(string $id)
{
//
}
/**
* Show the form for editing the specified resource.
*/
public function edit($id)
{
$title = "Update User";
$edit = User::findOrFail($id);
return view('admin.add_edit_user', compact('edit', 'title'));
}
/**
* Update the specified resource in storage.
*/
public function update(Request $request, $id)
{
$request->validate(
[
'name' => 'required',
'email' => 'required|email|unique:users,email,' . $id,
'photo' => 'mimes:png,jpeg,jpg|max:2048',
]
);
$update = User::findOrFail($id);
$update->name = $request->name;
$update->email = $request->email;
if ($request->hasfile('photo')) {
$filePath = public_path('uploads');
$file = $request->file('photo');
$file_name = time() . $file->getClientOriginalName();
$file->move($filePath, $file_name);
// delete old photo
if (!is_null($update->photo)) {
$oldImage = public_path('uploads/' . $update->photo);
if (File::exists($oldImage)) {
unlink($oldImage);
}
}
$update->photo = $file_name;
}
$result = $update->save();
Session::flash('success', 'User updated successfully');
return redirect()->route('user.index');
}
/**
* Remove the specified resource from storage.
*/
public function destroy(Request $request)
{
$userData = User::findOrFail($request->user_id);
$userData->delete();
// delete photo if exists
if (!is_null($userData->photo)) {
$photo = public_path('uploads/' . $userData->photo);
if (File::exists($photo)) {
unlink($photo);
}
}
Session::flash('success', 'User deleted successfully');
return redirect()->route('user.index');
}
}
Create the blade views resources/views/admin/index.blade.php
//resources/views/admin/index.blade.php
@extends('layouts.content')
@section('main-content')
<div class="container">
<h2>
Laravel 11 CRUD with upload image
</h2>
<div class="text-end mb-5">
<a href="{{ route('user.create') }}" class="btn btn-primary">Add New User</a>
</div>
@if (session('success'))
<div class="alert alert-success">
{{ session('success') }}
</div>
@endif
@if (session('error'))
<div class="alert alert-danger">
{{ session('error') }}
</div>
@endif
<div class="table-responsive">
<table class="table table-hover">
<thead class="table-primary">
<th>#</th>
<th>Name</th>
<th>Email</th>
<th>Photo</th>
<th>Action</th>
</thead>
<tbody>
@forelse($users as $index => $row)
<tr>
<td>{{ $index + 1 }}</td>
<td>{{ $row->name }}</td>
<td>{{ $row->email }}</td>
<td>
<div class="showPhoto">
<div id="imagePreview" style="@if ($row->photo != '') background-image:url('{{ url('/') }}/uploads/{{ $row->photo }}')@else background-image: url('{{ url('/img/avatar.png') }}') @endif;">
</div>
</div>
</td>
<td>
<a href={{ route('user.edit', ['id' => $row->id]) }} class="btn btn-primary"> Edit</a>
<button class="btn btn-danger" onClick="deleteFunction('{{ $row->id }}')">Delete</button>
</td>
</tr>
@empty
<tr>
<td colspan="5">No Users Found</td>
</tr>
@endforelse
</tbody>
</table>
</div>
</div>
@include ('admin.modal_delete')
@endsection
@push('js')
<script>
function deleteFunction(id) {
document.getElementById('delete_id').value = id;
$("#modalDelete").modal('show');
}
</script>
@endpush
<style>
.showPhoto {
width: 51%;
height: 54px;
margin: auto;
}
.showPhoto>div {
width: 100%;
height: 100%;
border-radius: 50%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
</style>
resources/views/admin/add_edit_user.blade.php
//resources/views/admin/add_edit_user.blade.php
@extends('layouts.content')
@section('main-content')
<div class="container">
<div class="col-md-12">
<div class="form-appl">
<h3>{{ $title }}</h3>
<form class="form1" method="post" action="@if (isset($edit->id)) {{ route('user.update', ['id' => $edit->id]) }}@else{{ route('user.store') }} @endif" enctype="multipart/form-data">
@csrf
<div class="form-group col-md-12 mb-3">
<label for="">Your Name</label>
<input class="form-control" type="text" name="name" placeholder="Enter Your Name" value="@if (isset($edit->id)) {{ $edit->name }}@else {{ old('name') }} @endif">
@error('name')
<div class="text-danger">{{ $message }}</div>
@enderror
</div>
<div class="form-group col-md-12 mb-3">
<label for="">Your Email</label>
<input class="form-control" type="text" name="email" placeholder="Enter Your Email" value="@if (isset($edit->id)) {{ $edit->email }}@else {{ old('email') }} @endif">
@error('email')
<div class="text-danger">{{ $message }}</div>
@enderror
</div>
<div class="form-group col-md-12 mb-5">
<label for="">Photo</label>
<div class="avatar-upload">
<div>
<input type='file' id="imageUpload" name="photo" accept=".png, .jpg, .jpeg" onchange="previewImage(this)" />
<label for="imageUpload"></label>
</div>
<div class="avatar-preview">
<div id="imagePreview" style="@if (isset($edit->id) && $edit->photo != '') background-image:url('{{ url('/') }}/uploads/{{ $edit->photo }}')@else background-image: url('{{ url('/img/avatar.png') }}') @endif"></div>
</div>
</div>
@error('photo')
<div class="text-danger">{{ $message }}</div>
@enderror
</div>
<input type="submit" class="btn btn-primary" value="Submit">
<a class="btn btn-danger" href="{{ route('user.index') }}">Cancel</a>
</form>
</div>
</div>
</div>
@endsection
@push('js')
<script type="text/javascript">
function previewImage(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$("#imagePreview").css('background-image', 'url(' + e.target.result + ')');
$("#imagePreview").hide();
$("#imagePreview").fadeIn(700);
}
reader.readAsDataURL(input.files[0]);
}
}
</script>
@endpush
<style>
.avatar-upload {
position: relative;
max-width: 205px;
}
.avatar-upload .avatar-preview {
width: 67%;
height: 147px;
position: relative;
border-radius: 3%;
border: 6px solid #F8F8F8;
}
.avatar-upload .avatar-preview>div {
width: 100%;
height: 100%;
border-radius: 3%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
</style>
resources/views/admin/modal_delete.blade.php
//resources/views/admin/modal_delete.blade.php
<!-- Modal -->
<div class="modal fade" id="modalDelete" tabindex="-1" role="dialog" aria-labelledby="modalDeleteTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<form action="{{ route('user.delete') }}" method="post">
{{ csrf_field() }}
<input type="hidden" name="user_id" id="delete_id">
<div>
<center>
<h1>!</h1>
</center>
</div>
<div class="modal-body">
<center>
<h1>Are You Sure?</h1>
<h6>You want to Delete the user!</h6>
</center>
</div>
<div class="row" style="margin-bottom: 50px; text-align: center;">
<div class="col-sm-3"></div>
<div class="col-sm-3">
<button type="button" class="btn btn-danger btn-modal" data-bs-dismiss="modal">Cancel</button>
</div>
<div class="col-sm-3">
<button type="submit" class="btn btn-success btn-modal">Delete</button>
</div>
<div class="col-sm-3"></div>
</div>
</form>
</div>
</div>
</div>
resources/views/layouts/header.blade.php
//resources/views/layouts/header.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Laravel 11 CRUD with upload image</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<meta name="_token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" />
</head>
resources/views/layouts/content.blade.php
//resources/views/layouts/content.blade.php
@include('layouts.header')
<body>
@yield('main-content')
@include('layouts.footer')
@stack('js')
</body>
</html>
resources/views/layouts/footer.blade.php
// resources/views/layouts/footer.blade.php <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/js/bootstrap.min.js"></script>Routes
routes/web.php
//routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\UserController;
Route::get('/', function () {
return view('welcome');
});
Route::get('/admin', [UserController::class, 'index'])->name('user.index');
Route::group(['prefix' => 'admin/user'], function () {
Route::get('/create', [UserController::class, 'create'])->name('user.create');
Route::post('/add', [UserController::class, 'store'])->name('user.store');
Route::get('/edit/{id}', [UserController::class, 'edit'])->name('user.edit');
Route::post('/update/{id}', [UserController::class, 'update'])->name('user.update');
Route::post('/delete', [UserController::class, 'destroy'])->name('user.delete');
});
Run C:\xampp\htdocs\laravel\laravel11\myapp>php artisan serve Starting Laravel development server: http://127.0.0.1:8000
https://github.com/cairocodes/laravel-11-crud-with-upload-image/tree/main
