Laravel

Laravel 10 Multiple Image Upload with Preview using AJAX

Laravel

Laravel 10 Multiple Image Upload with Preview using AJAX

In many web applications, allowing users to upload multiple images at once can be a valuable feature. Additionally, providing a preview of the uploaded images before submitting the form enhances the user experience. In this example, we'll demonstrate how to implement multiple image upload with preview using AJAX in a Laravel 10 application.

Step 1: Set Up the Laravel Project

Create a new Laravel 10 project using Composer:

composer create-project laravel/laravel multiple-image-upload-example
cd multiple-image-upload-example

Step 2: Create a Controller and Routes

Create a new controller that handles the multiple image upload and preview:

php artisan make:controller MultipleImageUploadController

In the generated MultipleImageUploadController.php file, implement the methods to handle image upload and preview:

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class MultipleImageUploadController extends Controller
{
    public function index()
    {
        return view('multiple-image-upload');
    }

    public function upload(Request $request)
    {
        $images = [];
        if ($request->hasFile('images')) {
            foreach ($request->file('images') as $image) {
                $imageName = time() . '.' . $image->extension();
                $image->move(public_path('uploads'), $imageName);
                $images[] = asset('uploads/' . $imageName);
            }
        }

        return response()->json(['image_urls' => $images]);
    }
}

Define the routes in routes/web.php:

use App\Http\Controllers\MultipleImageUploadController;

Route::get('/multiple-image-upload', [MultipleImageUploadController::class, 'index']);
Route::post('/upload-multiple', [MultipleImageUploadController::class, 'upload']);

Step 3: Create the View

Create a view file named multiple-image-upload.blade.php in the resources/views directory:

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 10 Multiple Image Upload with Preview</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>Laravel 10 Multiple Image Upload with Preview</h1>
    <form id="multipleImageUploadForm" method="post" enctype="multipart/form-data">
        @csrf
        <input type="file" name="images[]" id="imageInput" multiple accept="image/*">
        <button type="submit">Upload</button>
    </form>
    <div id="imagePreview"></div>

    <script>
        $(document).ready(function() {
            $('#multipleImageUploadForm').submit(function(event) {
                event.preventDefault();
                var formData = new FormData(this);

                $.ajax({
                    url: '/upload-multiple',
                    type: 'POST',
                    data: formData,
                    dataType: 'json',
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        var imageUrls = response.image_urls;
                        $('#imagePreview').empty();
                        $.each(imageUrls, function(index, imageUrl) {
                            $('#imagePreview').append('<img src="' + imageUrl + '" alt="Preview">');
                        });
                        $('#imageInput').val('');
                    }
                });
            });
        });
    </script>
</body>
</html>

Step 4: Create an "uploads" Directory

Create an "uploads" directory in the public folder to store the uploaded images:

mkdir public/uploads

Step 5: Start the Development Server

Start the Laravel development server and access the application in your web browser:

php artisan serve

Visit http://127.0.0.1:8000/multiple-image-upload in your browser to access the multiple image upload page. Choose multiple images to upload, and they will be displayed as previews below the upload button.

Recent Posts

Categories

Tag Clouds