Blog

Laravel 11 Summernote Image Upload Example | websolutioncode.com
Laravel 11 Summernote Image Upload Example | websolutioncode.com

Laravel 11 Summernote Image Upload Example

Introduction:

Laravel stands out among PHP frameworks for its reputation of being user-friendly and sophisticated when it comes to constructing web applications.. Summernote is a WYSIWYG (What You See Is What You Get) editor that makes it easy for users to format text and insert images into their content. In this tutorial, we will walk through the process of integrating Summernote into a Laravel 11 application and enabling image uploads.

Prerequisites:

  • Basic understanding of PHP and Laravel.
  • Composer installed on your machine.
  • Familiarity with HTML and JavaScript.

Step 1:

Setting Up a New Laravel Project First, let’s create a new Laravel project using Composer. Open your terminal and run the following command:

composer create-project --prefer-dist laravel/laravel summernote-tutorial

This command will create a new Laravel project named “summernote-tutorial”.

Step 2:

Installing Summernote Next, let’s install Summernote using npm (Node Package Manager). Run the following commands in your terminal:

cd summernote-tutorial
npm install summernote

This will install Summernote into your Laravel project.

Step 3:

Setting Up Routes Open the routes/web.php file in your Laravel project and add the following routes:

use App\Http\Controllers\SummernoteController;

Route::get('/summernote', [SummernoteController::class, 'index']);
Route::post('/summernote/upload', [SummernoteController::class, 'upload']);

Step 4:

Creating the Controller Now, let’s create a controller named SummernoteController by running the following command in your terminal:

php artisan make:controller SummernoteController

Open the newly created SummernoteController.php file located in the app/Http/Controllers directory and add the following methods:

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class SummernoteController extends Controller
{
    public function index()
    {
        return view('summernote');
    }

    public function upload(Request $request)
    {
        $image = $request->file('file');
        $imageName = time().'.'.$image->extension();
        $image->move(public_path('images'), $imageName);
        return response()->json(['url' => '/images/'.$imageName]);
    }
}

Step 5:

Creating the View Create a new Blade view file named summernote.blade.php in the resources/views directory. Add the following HTML code to it:

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 11 Summernote Image Upload Tutorial</title>
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
    <div class="container mt-5">
        <form id="summernoteForm">
            <textarea id="summernote" name="summernote"></textarea>
            <button type="submit" class="btn btn-primary mt-3">Submit</button>
        </form>
    </div>

    <script src="{{ asset('js/app.js') }}"></script>
    <script>
        $(document).ready(function() {
            $('#summernote').summernote({
                height: 300,
                callbacks: {
                    onImageUpload: function(files) {
                        uploadImage(files[0]);
                    }
                }
            });

            function uploadImage(file) {
                let formData = new FormData();
                formData.append('file', file);
                $.ajax({
                    url: '/summernote/upload',
                    method: 'POST',
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function(data) {
                        $('#summernote').summernote('insertImage', data.url);
                    }
                });
            }
        });
    </script>
</body>
</html>

Step 6:

Running the Application Finally, run your Laravel application by executing the following command in your terminal:

php artisan serve

Visit http://127.0.0.1:8000/summernote in your web browser to see the Summernote editor in action. You can now write content, insert images, and upload them seamlessly.

Conclusion:

In this tutorial, we learned how to integrate Summernote into a Laravel 11 application and enable image uploads. By following these steps, you can enhance your web applications with a rich text editor that allows users to create engaging content effortlessly.

Tags: , ,