Blog

How to upload multiple images in laravel websolutioncode.com
How to upload multiple images in laravel websolutioncode.com

How to Upload Multiple Images in Laravel

Upload Multiple Images in Laravel is a common requirement for many web applications. Laravel offers a user-friendly approach for managing file uploads through the use of the integrated request object and the Storage facade. Here’s a step-by-step guide on how to achieve this:

Step 1: Set up a new Laravel project (if not already done)

composer create-project --prefer-dist laravel/laravel multiple-image-upload
cd multiple-image-upload


Step 2: Create a Model and Migration

Create a model and migration to represent the images you want to upload.

php artisan make:model Image -m

Edit the migration file (database/migrations/xxxx_xx_xx_create_images_table.php) to include the necessary columns for your images:

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

Run the migration to create the images table:

php artisan migrate

Step 3: Create a Controller

Generate a controller to handle the image upload logic

php artisan make:controller ImageController

Edit the ImageController to include the following methods:

use App\Models\Image;
use Illuminate\Http\Request;

class ImageController extends Controller
{
    public function index()
    {
        $images = Image::all();
        return view('images.index', compact('images'));
    }

    public function create()
    {
        return view('images.create');
    }

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

        foreach ($request->file('images') as $image) {
            $imageName = $image->getClientOriginalName();
            $imagePath = $image->storeAs('images', $imageName, 'public');

            Image::create([
                'name' => $imageName,
                'path' => $imagePath,
            ]);
        }

        return redirect()->route('images.index')->with('success', 'Images uploaded successfully.');
    }
}

Step 4: Set up Routes

Define the routes in routes/web.php:

use App\Http\Controllers\ImageController;

Route::get('/images', [ImageController::class, 'index'])->name('images.index');
Route::get('/images/create', [ImageController::class, 'create'])->name('images.create');
Route::post('/images', [ImageController::class, 'store']);

Step 5: Create Views

Create the views for listing images and the form for Upload Multiple Images in Laravel

In resources/views/images/index.blade.php:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Websolutioncode.com Multiple Image Upload</title>
</head>
<body>
    <h1>Uploaded Images</h1>
    
    @foreach($images as $image)
        <img src="{{ asset('storage/' . $image->path) }}" alt="{{ $image->name }}" style="max-width: 200px; margin: 10px;">
    @endforeach

    <a href="{{ route('images.create') }}">Upload Images</a>
</body>
</html>

In resources/views/images/create.blade.php:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Upload Images</title>
</head>
<body>
    <h1>Upload Images</h1>

    @if ($errors->any())
        <div style="color: red;">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form action="{{ url('/images') }}" method="post" enctype="multipart/form-data">
        @csrf

        <input type="file" name="images[]" multiple accept="image/*">
        <button type="submit">Upload</button>
    </form>
</body>
</html>

Step 6: Run the Application

Run the development server:

php artisan serve

Visit http://127.0.0.1:8000/images in your browser to see the uploaded images and upload new ones by visiting http://127.0.0.1:8000/images/create.

This example assumes you’re using the public disk for storage. Make sure to configure your filesystems.php configuration file accordingly if you choose a different disk.

Check our tools website Word count
Check our tools website check More tutorial

Tags:

Leave a Reply