Laravel 12 and ReactJS: Upload and Display Images – A Complete Guide

Handling image uploads and displaying them in a web application is a common requirement for many projects. Laravel, a powerful PHP framework, and ReactJS, a popular JavaScript library, together provide an excellent full-stack solution for this task. Laravel excels at managing server-side logic and file storage, while ReactJS is perfect for creating dynamic, interactive user interfaces.

In this detailed blog post, we’ll walk through the process of setting up a full-stack application to upload and display images using Laravel 12 as the backend and ReactJS as the frontend.

By the end of this guide, you’ll have a fully functional application where users can upload images to a Laravel backend and see them displayed in a ReactJS frontend.

What Are Laravel and ReactJS?

Before diving into the implementation, let’s briefly understand the tools we’ll be using:

• Laravel: A PHP framework that follows the Model-View-Controller (MVC) architecture. It offers features like routing, database management, and file storage, making it ideal for backend development. Laravel 12 introduces modern improvements like Vite for asset compilation.
• ReactJS: A JavaScript library for building user interfaces, especially single-page applications (SPAs). Its component-based structure allows for reusable UI elements and efficient state management.

When combined, Laravel serves as the API backend to handle image uploads and storage, while ReactJS provides a responsive and dynamic frontend to interact with the user.

Setting Up the Project

Step 1: Install Laravel 12

Laravel is installed using Composer, a PHP dependency manager. Open your terminal and run:

composer create-project laravel/laravel laravel-react-image-upload

Navigate into the project folder:

cd laravel-react-image-upload

Step 2: Install ReactJS and Dependencies

Install React scaffolding with:

composer require laravel/ui
php artisan ui react
npm install

Step 3: Compile Frontend Assets

Laravel 12 uses Vite for asset compilation:

npm run build

Creating the Backend for Image Uploads

Step 1: Create a Model and Migration

Run the following command to create a model and migration:

php artisan make:model Image -m

Modify the migration file in database/migrations:

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    public function up(): void
    {
        Schema::create('images', function (Blueprint $table) {
            $table->id();
            $table->string('path');
            $table->timestamps();
        });
    }

    public function down(): void
    {
        Schema::dropIfExists('images');
    }
};

Run the migration:

php artisan migrate

Step 2: Configure File Storage

Create a symbolic link to make stored files publicly accessible:

php artisan storage:link

Step 3: Create a Controller

Run:

php artisan make:controller ImageController

Modify app/Http/Controllers/ImageController.php:

namespace App\Http\Controllers;

use App\Models\Image;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;

class ImageController extends Controller
{
    public function index()
    {
        return Image::all();
    }

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

        $path = $request->file('image')->store('images', 'public');
        $image = Image::create(['path' => $path]);

        return response()->json($image, 201);
    }
}

Step 4: Define API Routes

Install API

php artisan install:api

Modify routes/api.php:

use App\Http\Controllers\ImageController;
use Illuminate\Support\Facades\Route;

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

Integrating ReactJS for Image Upload and Display

Step 1: Install Axios

npm install axios

Step 2: Create a React Component

Create resources/js/components/ImageUpload.js:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const ImageUpload = () => {
    const [images, setImages] = useState([]);
    const [file, setFile] = useState(null);

    useEffect(() => {
        fetchImages();
    }, []);

    const fetchImages = async () => {
        const response = await axios.get('/api/images');
        setImages(response.data);
    };

    const handleFileChange = (e) => {
        setFile(e.target.files[0]);
    };

    const handleUpload = async () => {
        if (!file) return;

        const formData = new FormData();
        formData.append('image', file);

        const response = await axios.post('/api/images', formData, {
            headers: { 'Content-Type': 'multipart/form-data' }
        });
        setImages([...images, response.data]);
        setFile(null);
    };

    return (
        <div>
            <h1>Image Upload</h1>
            <input type="file" onChange={handleFileChange} />
            <button onClick={handleUpload}>Upload</button>
            <div>
                {images.map(image => (
                    <img key={image.id} src={`/storage/${image.path}`} alt="Uploaded" width="200" />
                ))}
            </div>
        </div>
    );
};

export default ImageUpload;

Step 3: Register the React Component

Modify resources/js/app.js:

import { createRoot } from 'react-dom/client';
import ImageUpload from './components/ImageUpload';

const root = createRoot(document.getElementById('app'));
root.render(<ImageUpload />);

Step 4: Update Blade Template

Modify resources/views/welcome.blade.php:

<!DOCTYPE html>
<html>
<head>
    <title>Laravel & React</title>
    @vite('resources/js/app.js')
</head>
<body>
    <div id="app"></div>
</body>
</html>

Step 5: Compile and Run

composer run dev

Conclusion

This tutorial covered the complete process of setting up Laravel and ReactJS to handle image uploads and display them dynamically. This approach keeps backend logic separate from frontend UI, resulting in a scalable and maintainable application.