Laravel 10 Image Upload with Preview Example

Laravel 10 Image Upload: A Comprehensive Tutorial

Aman Jain,

Laravel 10, renowned for its efficiency and simplicity, offers a seamless solution for handling image uploads in web applications. In Laravel 10 Image Upload tutorial, we will guide you through the process of uploading and displaying images using the robust features of Laravel 10. Whether you are a beginner or an experienced Laravel developer, this tutorial will help you implement image uploading effortlessly.

Prerequisites for Laravel 10 Image Upload

Before we dive into the tutorial, let’s ensure that we have the necessary prerequisites in place:

  1. Basic understanding of Laravel and PHP.
  2. Laravel 10 installed on your system.
  3. A Laravel project set up.
  4. A working database connection.

Step 1: Create a Migration and Model

To begin, we need to create a table to store our image data. Let’s generate a migration file using the following command:

php artisan make:migration create_images_table

Now navigate to the database/migrations folder and open the newly created migration file. Inside the up() method, add the required columns for the images table:

public function up()
{
    Schema::create('images', function (Blueprint $table) {
        $table->id();
        $table->string('title');
        $table->text('image_path');
        $table->timestamps();
    });
}

Once you have defined the columns, run the migration command to create the table:

php artisan migrate

To interact with the images table, we need to create an Image model. Run the following command to generate the model:

php artisan make:model Image

Step 2: Create Routes and Controllers

To handle image uploads, we’ll create a dedicated controller. Execute the following command to generate the controller:

php artisan make:controller ImageController

Now, let’s define the routes for our image upload functionality. Open the routes/web.php file and add the following routes:

use App\Http\Controllers\ImageController;

Route::get('/images', [ImageController::class, 'index']);
Route::post('/images/upload', [ImageController::class, 'store']);

Step 3: Create the Image Upload Form

In this step, we’ll create a form that allows users to upload images. Inside the resources/views directory, create a new file called imageUpload.blade.php. Copy and paste the following code into the file:

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 10 Image Upload Example</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="panel panel-primary">
            <div class="panel-heading">
                <h2>Laravel 10 Image Upload Example</h2>
            </div>
            <div class="panel-body">
                <form action="{{ url('/images/upload') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="mb-3">
                        <label class="form-label" for="inputImage">Image:</label>
                        <input type="file" name="image" id="inputImage" class="form-control">
                        @error('image')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="mb-3">
                        <button type="submit" class="btn btn-success">Upload</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
</html>

Step 4: Handle Image Uploads

In the ImageController we created earlier, let’s define the index() and store() methods. The index() method will render the image upload form, while the store() method will handle the image upload logic.

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\View\View;
use Illuminate\Http\RedirectResponse;

class ImageController extends Controller
{
    public function index(): View
    {
        return view('imageUpload');
    }

    public function store(Request $request): RedirectResponse
    {
        $request->validate([
            'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
        ]);

        $imageName = time().'.'.$request->image->extension();
        $request->image->move(public_path('images'), $imageName);

        // Store $imageName in the database

        return back()
            ->with('success', 'You have successfully uploaded an image.')
            ->with('image', $imageName);
    }
}

Congratulations! You have successfully implemented image uploads in your Laravel 10 application. Now let’s test it out.

Step 5: Test the Image Upload Functionality

To view the image upload form, visit the following URL in your web browser:

http://localhost:8000/images

Select an image file and click the “Upload” button. If the image is valid and within the specified size limits, it will be stored in the public/images directory. The image file name will be saved in the database along with other relevant information.

Additional Tips and Tricks

  • To store images in a different folder, modify the public_path('images') part of the store() method in the ImageController.
  • To store images in cloud storage services like Amazon S3, refer to the Laravel documentation for the necessary configuration and code adjustments.

That’s it! You now have a fully functional image upload feature in your Laravel 10 application. Feel free to customize and enhance it according to your specific requirements. Happy coding!

Laravel Laravel 10

Related Posts