article

Monday, June 27, 2022

Laravel 9 How To Upload Image Using Ckeditor

Laravel 9 How To Upload Image Using Ckeditor

How to install laravel 9

https://tutorial101.blogspot.com/2022/02/how-to-install-laravel-9.html

Connecting our Database

open .env file root directory.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel9
DB_USERNAME=root
DB_PASSWORD=

Create tables Model

php artisan make:model Product -m
C:\xampp\htdocs\laravel\laravelproject>php artisan make:model Product -m

Open new products migrations
yourproject/database/migrations
laravelproject\database\migrations\_create_products_table.php
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
//laravelproject\database\migrations\_create_products_table.php
<?php
 
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
 
return new class extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('products', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->string('price');
            $table->text('description');
            $table->timestamps();
        });
    }
 
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('products');
    }
};
Database Migration
php artisan migrate

C:\xampp\htdocs\laravel\laravelproject>php artisan migrate
Migration table created successfully.
check database table

Creating Controller

php artisan make:controller ProductController
C:\xampp\htdocs\laravel\laravelproject>php artisan make:controller ProductController
change it with the following codes:

laravelproject\app\Http\Controllers\ProductController.php
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
//laravelproject\app\Http\Controllers\ProductController.php
<?php
 
namespace App\Http\Controllers;
use App\Models\Product; //add Product Model
 
use Illuminate\Http\Request;
 
class ProductController extends Controller
{
    public function index(){
        return view('home');
    }
 
    public function uploadImage(Request $request) {   
      if($request->hasFile('upload')) {
                $originName = $request->file('upload')->getClientOriginalName();
                $fileName = pathinfo($originName, PATHINFO_FILENAME);
                $extension = $request->file('upload')->getClientOriginalExtension();
                $fileName = $fileName.'_'.time().'.'.$extension;
             
                $request->file('upload')->move(public_path('images'), $fileName);
        
                $CKEditorFuncNum = $request->input('CKEditorFuncNum');
                $url = asset('images/'.$fileName);
                $msg = 'Image uploaded successfully';
                $response = "<script>window.parent.CKEDITOR.tools.callFunction($CKEditorFuncNum, '$url', '$msg')</script>";
                    
                @header('Content-type: text/html; charset=utf-8');
                echo $response;
      }
   }
 
   public function store(Request $request)
   {
       $input = $request->all();
       Product::create($input);
       return redirect('/')->with('flash_message', 'New Product Addedd!'); 
   }
}
Create Views
laravelproject\resources\views\home.blade.php

Bootstrap 5
https://getbootstrap.com/docs/5.0/getting-started/introduction/
https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css

Jquery
https://jquery.com/download/
CDN : jsDelivr CDN
https://www.jsdelivr.com/package/npm/jquery
https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js

CKEditor
CKEditor CDN
https://ckeditor.com/
https://cdn.ckeditor.com/
laravelproject\resources\views\home.blade.php
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
//laravelproject\resources\views\home.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>Laravel 9 How To Upload Image Using Ckeditor</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h1 class="text-center">Laravel 9 How To Upload Image Using Ckeditor</h1><br>
                <form method="post" action="{{ route('store') }}" class="form form-horizontal">              
                  @csrf
                    <div class="form-group">
                        <label>Title</label>
                        <input type="text" name="name" class="form-control"/>
                    </div> 
                    <div class="form-group">
                        <label>Description</label>
                         <textarea class="form-control" id="summary-ckeditor" name="description"></textarea>
                    </div> 
                    <div class="form-group">
                        <label>Price</label>
                        <input type="text" name="price" class="form-control"/>
                    </div>  
                    <div class="form-group">
                        <input type="submit" value="Submit" class="btn btn-primary"/>
                    </div>
                </form>            
            </div>
            @if ( Session::has('flash_message') )
                <div class="alert alert-success">
                    <h3>{{ Session::get('flash_message') }}</h3>
                </div>
            @endif
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdn.ckeditor.com/4.19.0/standard/ckeditor.js"></script>
    <script>
    CKEDITOR.replace('summary-ckeditor', {
        filebrowserUploadUrl: "{{route('upload', ['_token' => csrf_token() ])}}",
        filebrowserUploadMethod: 'form'
    });
    </script>
</body>
</html>
app/models/Product.php
?
1
2
3
4
5
6
7
8
9
10
11
12
13
//app/models/Product.php
<?php
 
namespace App\Models;
 
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
 
class Product extends Model
{
    use HasFactory;
    protected $fillable = ['name', 'price', 'description'];
}
laravelproject\routes\web.php
?
1
2
3
4
5
6
7
8
9
10
11
12
13
//laravelproject\routes\web.php
<?php
 
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ProductController; //add ProductController
 
//Route::get('/', function () {
//    return view('welcome');
//});
 
Route::get('/', [ProductController::class, 'index']);
Route::post('upload_image', [ProductController::class, 'uploadImage'])->name('upload');
Route::post('save', [ProductController::class, 'store'])->name('store');
Run C:\xampp\htdocs\laravel\laravelproject>php artisan serve
Starting Laravel development server: http://127.0.0.1:8000

Posted by ednalan at 10:38 PM . Under .

Related Post